HTML Div Element

องค์ประกอบ <div> ใช้เป็นกล่องหรือคอนเทนเนอร์ (container) สำหรับเก็บองค์ประกอบ HTML อื่น ๆ

องค์ประกอบ `<div>`

โดยปกติแล้ว <div> จะเป็น block element หมายความว่ามันจะกินพื้นที่เต็มความกว้างของบรรทัด และจะมีการขึ้นบรรทัดใหม่ก่อนและหลังเสมอ

				
					Lorem Ipsum <div>I am a div</div> dolor sit amet.

`<div>` เป็น Container

องค์ประกอบ <div> มักถูกใช้เพื่อจัดกลุ่มส่วนต่าง ๆ ของหน้าเว็บเข้าด้วยกัน

				
					<div>
    <h2>hostatom</h2>
    <p>hostatom บริการ Web Hosting, WordPress Hosting บน Server ประสิทธิภาพสูง</p>
    <p>ด้วยทีมงาน Network Engineer ที่ความรู้ความเชี่ยวชาญด้าน Web Hosting โดยเฉพาะ</p>
  </div>

จัดกึ่งกลางองค์ประกอบ `<div>`

หาก <div> ของคุณไม่ได้กว้างเต็ม 100% และคุณต้องการ จัดให้อยู่กึ่งกลาง ให้ตั้งค่า CSS ของ margin เป็น auto

				
					div {
    width: 300px;
    margin: auto;
    background-color: #FFF4A3;
  }

การใช้ `<div>` หลายตัวในหน้าเดียวกัน

คุณสามารถใช้ <div> หลาย ๆ ตัวในหน้าเดียวได้

				
					<div style="background-color:#FFF4A3;">
    <h2>hostatom</h2>
    <p>hostatom บริการ Web Hosting, WordPress Hosting บน Server ประสิทธิภาพสูง</p>
    <p>ด้วยทีมงาน Network Engineer ที่ความรู้ความเชี่ยวชาญด้าน Web Hosting โดยเฉพาะ</p>
  </div>

  <div style="background-color:#FFC0C7;">
    <h2>hostatom Knowledge Base</h2>
    <p>เป็นแหล่งรวมข้อมูล คู่มือ บทความที่ช่วยให้คุณได้เข้าใจถึงวิธีการจัดการเว็บไซต์กับระบบต่างๆ</p>
    <p>มีข้อมูลอีกเยอะที่คุณจะได้รับความรู้ในฐานข้อมูลของเรา มาอ่านกันได้เลย</p>
  </div>

  <div style="background-color:#D9EEE1;">
    <h2>Private Hosting</h2>
    <p>เป็นบริการ Web Hosting ที่ผู้ใช้แต่ละรายใช้พื้นที่โดยไม่ต้องแบ่งทรัพยากรกับผู้อื่น</p>
    <p>มั่นใจได้ว่าจะได้รับประสิทธิภาพสูงสุด เร็ว แรง หมดปัญหาเซิร์ฟเวอร์ล่ม</p>
  </div>

การจัดวาง `<div>` ให้อยู่ข้างกัน

เวลาสร้างหน้าเว็บ เรามักต้องการให้องค์ประกอบ <div> หลายตัวอยู่ข้างกัน เช่นนี้:

Float

คุณสมบัติ float ใน CSS เดิมทีไม่ได้ออกแบบมาเพื่อจัด <div> ให้อยู่ข้างกัน
แต่ถูกนำมาใช้เพื่อจุดประสงค์นี้มานานแล้ว

float ใช้ในการกำหนดตำแหน่ง (positioning) และจัดเนื้อหาในแนวนอนแทนแนวตั้ง

				
					div.mycontainer {
  width: 100%;
  overflow: auto;
}
div.mycontainer div {
  width: 33%;
  float: left;
}

Inline-block

ถ้าคุณเปลี่ยนคุณสมบัติ display ของ <div> จาก block เป็น inline-block องค์ประกอบ <div> จะไม่ขึ้นบรรทัดใหม่ก่อนและหลังอีกต่อไป และจะแสดงอยู่ข้างกันแทนที่จะอยู่ซ้อนกัน

				
					div {
  width: 30%;
  display: inline-block;
}

Flex

CSS Flexbox ถูกสร้างขึ้นเพื่อให้การจัดเลย์เอาท์มีความยืดหยุ่นและตอบสนอง (responsive) โดยไม่ต้องใช้ float หรือ position

วิธีนี้ต้องมี <div> ภายนอกอีกชั้น ทำหน้าที่เป็น “flex container”

				
					.mycontainer {
      display: flex;
    }
    .mycontainer>div {
      width: 33%;
    }

Grid

CSS Grid Layout เป็นระบบเลย์เอาท์ที่ใช้โครงสร้างตาราง (rows และ columns) ช่วยให้จัดหน้าได้ง่ายขึ้นโดยไม่ต้องใช้ float หรือ position

Grid เหมือนกับ Flex แต่สามารถกำหนดหลายแถวและควบคุมตำแหน่งของแต่ละแถวได้

				
					.grid-container {
      display: grid;
      grid-template-columns: 33% 33% 33%;
    }

สรุป

Tag	คำอธิบาย
`<div>`	ใช้กำหนดส่วนหนึ่งของเอกสาร (block-level element)

HTML Div Element

องค์ประกอบ <div>

<div> เป็น Container

จัดกึ่งกลางองค์ประกอบ <div>

การใช้ <div> หลายตัวในหน้าเดียวกัน

การจัดวาง <div> ให้อยู่ข้างกัน