วิธีวาง div 3 ตัวติดกัน (Side by Side) ใน HTML/CSS

ใช้ CSS float: left หรือ Flexbox/Grid เพื่อวาง <div> 3 ตัวติดกันแนวนอน

วิธีที่ 1: Float (Legacy)

<!DOCTYPE html>
<html>
<head>
  <title>HTML div side by side</title>
  <style>
    .box { width: 100px; height: 100px; float: left; margin: 10px; }
    .clearfix::after { content: ""; display: table; clear: both; }
  </style>
</head>
<body>
  <div class="clearfix">
    <div class="box" style="background:gray;">First DIV</div>
    <div class="box" style="background:yellow;">Second DIV</div>
    <div class="box" style="background:red;">Third DIV</div>
  </div>
</body>
</html>

วิธีที่ 2: Flexbox (Modern - แนะนำ)

<style>
  .flex-container { display: flex; gap: 20px; }
  .flex-item { width: 100px; height: 100px; }
</style>
<div class="flex-container">
  <div class="flex-item" style="background:gray;">First</div>
  <div class="flex-item" style="background:yellow;">Second</div>
  <div class="flex-item" style="background:red;">Third</div>
</div>

วิธีที่ 3: CSS Grid (Modern)

<style>
  .grid-container { display: grid; grid-template-columns: repeat(3, 100px); gap: 20px; }
  .grid-item { height: 100px; }
</style>
<div class="grid-container">
  <div class="grid-item" style="background:gray;">First</div>
  <div class="grid-item" style="background:yellow;">Second</div>
  <div class="grid-item" style="background:red;">Third</div>
</div>

วิธีที่ 4: Inline-block

<style>
  .ib-container { font-size: 0; } /* remove whitespace */
  .ib-item { display: inline-block; width: 100px; height: 100px; font-size: 16px; margin-right: 20px; }
</style>

เปรียบเทียบ

คำแนะนำ

ใช้ Flexbox สำหรับ 1D layout (side-by-side) ใช้ Grid สำหรับ 2D layout