HTML Div Element

❮ บทเรียนก่อนหน้า
บทเรียนถัดไป ❯

<div> Element ใช้สำหรับระบุ Element อื่นๆ ที่ต้องการในพื้นที่หนึ่ง

<div> Element

<div> เป็น Element แบบบล็อกที่เป็นค่าเริ่มต้น ซึ่งหมายความว่า Element นี้ใช้ความกว้างทั้งหมดที่มีอยู่ และมีการแบ่งบล็อกกันระหว่างบรรทัดก่อนและหลังของ Element นี้

ตัวอย่าง

<!DOCTYPE html>
<html>
<style>
  div {
    background-color: #FFF4A3;
  }
</style>
<body>

  <h1>ตัวอย่าง div</h1>

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

  <p>พื้นหลังสีเหลือง แสดงถึงพื้นที่ของ div Element</p>

</body>
</html>
ลองดูสิ ❱

Element <div> ไม่มี Attribute ที่จำเป็นต้องระบุ แต่สามารถใช้ Attribute style, class และ id ได้ เนื่องจากเป็น Attribute ทั่วไป

<div> เป็น Container

Element <div> ใช้เพื่อจัดกลุ่มส่วนต่างๆ ของหน้าเว็บ

ตัวอย่าง

<!DOCTYPE html>
<html>
<style>
  div {
    background-color: #FFF4A3;
  }
</style>
<body>

  <h1>ตัวอย่าง div</h1>

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

  <p>พื้นหลังสีเหลือง แสดงถึงพื้นที่ของ div Element</p>

</body>
</html>
ลองดูสิ ❱

จัดกลางใน <div> Element

การจัดตำแหน่งของ Element อื่นๆ ภายใน <div> ให้อยู่ตรงกลาง และกำหนดความกว้างของ <div> โดยใช้ CSS ให้ตั้งค่าคุณสมบัติ (Property) margin เป็น auto

ตัวอย่าง

<!DOCTYPE html>
<html>
<style>
  div {
    width: 300px;
    margin: auto;
    background-color: #FFF4A3;
  }
</style>
<body>

  <h1>จัดกลาง div Element</h1>

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

</body>
</html>
ลองดูสิ ❱

Multiple <div> Elements

บนหน้าเว็บเดียวกัน สามารถมี <div> Element ได้หลายรายการ

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>

  <h1>Multiple DIV Elements</h1>

  <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>

  <p>เพิ่มสไตล์ CSS เพื่อให้แยก div ได้ง่ายขึ้นและสวยงามมากขึ้น</p>

</body>
</html>
ลองดูสิ ❱

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

ในการสร้างหน้าเว็บ มักจะมี <div> Element 2 Element หรือมากกว่านั้นที่อยู่ข้างกัน ซึ่งวิธีการในการจัดวาง Element ให้อยู่ข้างกัน มีหลายวิธี รวมถึงการใช้ CSS โดยวิธีการที่ใช้ทั่วไป มีดังนี้

Float

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

เนื่องจากคุณสมบัติ float ใช้ในการจัดตำแหน่งและจัดรูปแบบของเนื้อหา และอนุญาตให้ Element อยู่ข้างกันได้ แทนที่จะซ้อนทับกัน

ตัวอย่าง

<!DOCTYPE html>
<html>
<style>
  div.mycontainer {
    width: 100%;
    overflow: auto;
  }
  div.mycontainer div {
    width: 33%;
    float: left;
  }
</style>
<body>

  <div class="mycontainer">

    <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>

</body>
</html>
ลองดูสิ ❱

Inline-block

หากเปลี่ยนคุณสมบัติ display ของ Element <div> จาก block เป็น inline-block 

<div> จะไม่เพิ่มการขึ้นบรรทัดใหม่ก่อนและหลังอีกต่อไป และจะแสดงอยู่ข้างกันแทนที่จะซ้อนกัน

ตัวอย่าง

<!DOCTYPE html>
<html>
<style>
  div {
    width: 30%;
    display: inline-block;
  }
</style>
<body>

  <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>

</body>
</html>
ลองดูสิ ❱

Flex

การจัดเรียงแบบ Flexbox ของ CSS นำมาใช้เพื่อการออกแบบโครงสร้างที่ตอบสนองได้อย่างยืดหยุ่น โดยไม่ต้องใช้ float หรือการจัดตำแหน่ง

เพื่อให้ flex ของ CSS ทำงานได้ ให้ล้อมรอบ Element <div> ด้วย Element <div> อีกชั้นและกำหนดคุณสมบัติให้ display: flex

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
    }
    .mycontainer>div {
      width: 33%;
    }
  </style>
</head>
<body>

  <h1>ตัวอย่าง Flexbox</h1>
  <p>จัดตำแหน่ง Element DIV ทั้งสามให้อยู่ข้างกัน</p>

  <div class="mycontainer">

    <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>

</body>
</html>
ลองดูสิ ❱

Grid

Grid Layout มีระบบแบบ grid-based ที่มีแถวและคอลัมน์ ทำให้การสร้างหน้าเว็บง่ายขึ้นโดยไม่ต้องใช้ floats และ positioning

Grid คล้ายกับ Flex แต่มีความสามารถในการกำหนดมากกว่าหนึ่งแถวและจัดตำแหน่งแต่ละแถวได้อย่างอิสระ

Grid ใช้วิธีการล้อมรอบ Element <div> ด้วย Element <div> อีกชั้น และกำหนด <div> ด้านนอกให้สถานะ display: grid และต้องระบุความกว้างของแต่ละคอลัมน์ด้วย

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: 33% 33% 33%;
    }
  </style>
</head>
<body>

  <h1>ตัวอย่าง Grid</h1>
  <p>จัดตำแหน่ง Element DIV ทั้งสามให้อยู่ข้างกัน</p>

  <div class="grid-container">

    <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>

</body>
</html>
ลองดูสิ ❱

Tags

Tagคำอธิบาย
<div>กำหนดส่วนในหน้าเว็บ (block-level)
❮ บทเรียนก่อนหน้า
บทเรียนถัดไป ❯