ตัวอย่างการลอย CSS

หน้านี้มีตัวอย่างของ floating ที่ติดตามได้

แบบเกาะ / กล่องหล่องที่มีความกว้างเท่ากัน

Box 1
Box 2
Box 1
Box 2
Box 3

ด้วยการใช้ float คุณสมบัตินี้ทำให้เราสามารถรวมเนื้อหา floating ขนานกันได้ง่ายๆ

ตัวอย่าง

* {
  box-sizing: border-box;
}
.box {
  float: left;
  width: 33.33%; /* สามกล่องหล่อง (สี่กล่องหล่องใช้ 25% สองกล่องหล่องใช้ 50% และอย่างเดียวกัน) */
  padding: 50px; /* ถ้าต้องการเพิ่มช่องว่างระหว่างภาพ */
}

ลองด้วยตัวเอง

box-sizing คืออะไร?

คุณสามารถสร้างกล่องหล่องหล่องแบบ floating ขนานกันได้ง่ายๆ แต่เมื่อคุณเพิ่มเนื้อหาเพื่อขยายความกว้างของแต่ละกล่องหล่อง (เช่น padding หรือ border) กล่องหล่องนี้จะเสียหาย box-sizing คุณสมบัตินี้ทำให้เราสามารถรวมความกว้าง (และความสูง) ของกล่องหล่องทั้งหมด (และรวมด้วยเนื้อหาด้านใน) ให้เข้าไปด้วย และให้เนื้อหาด้านในอยู่ด้วยกล่องหล่องและไม่ถูกแตก

คุณสามารถที่ใช้ CSS Box Sizing ในบทนี้ คุณจะเรียนรู้เกี่ยวกับคุณสมบัติ box-sizing มากยิ่งขึ้น

ภาพขนาน

กล่องหล่องนี้ (The grid of boxes) ยังสามารถใช้แสดงภาพขนานกันได้ด้วย:

ตัวอย่าง

.img-container {
  float: left;
  width: 33.33%; /* สามกล่องหล่อง (สี่กล่องหล่องใช้ 25% สองกล่องหล่องใช้ 50% และอย่างเดียวกัน) */
  padding: 5px; /* ถ้าต้องการเพิ่มช่องว่างระหว่างภาพ */
}

ลองด้วยตัวเอง

กล่องหล่องที่มีความกว้างเท่ากัน

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

Box 1

Some content, some content, some content

Box 2

Some content, some content, some content

Some content, some content, some content

Some content, some content, some content

ตัวอย่าง

.box {
  height: 500px;
}

ลองด้วยตัวเอง

หากเราสามารถให้การตรงต่อได้ที่ซ่อมมีเนื้อหาจำนวนเดียวกันทุกครั้ง นั่นจะทำได้

ตัวอย่าง

แต่ด้วยวิธีนี้ก็จะทำให้สูญเสียความยืดเขตเท้า

Box 1 - นี่คือข้อความเพื่อให้เกิดความต้องการที่ใช้เวลาดูสำหรับให้เนื้อหาเพียงได้ตามที่คาดคิด

ลองด้วยตัวเอง

Box 2 - ความสูงของฉันจะตามความสูงของซ่อม 1。 CSS Flexbox สำหรับความรู้เพิ่มเติมเกี่ยวกับหน่วยเคลื่อนที่ในเรียงระเบียง Web คุณสามารถเรียนซึ่งเนื้อหานี้ใน

รายการนาฬิกาแนวนอก

เพื่อ float ใช้ร่วมกับรายการลิงก์เพื่อสร้างแนวนาฬิการะดับนอก

ตัวอย่าง

ลองด้วยตัวเอง

ตัวอย่างเรียงระเบียงเว็บไซต์

ใช้ float ขอบคุณสมบัติสำหรับเรียงระเบียงทั้งหมดของเว็บไซต์เป็นไปตามนิยม

ตัวอย่าง

.header, .footer {
  background-color: grey;
  color: white;
  padding: 15px;
}
.column {
  float: left;
  padding: 15px;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
.menu {
  width: 25%;
}
.content {
  width: 75%;
}

ลองด้วยตัวเอง

ตัวอย่างเพิ่มเติม

ภาพที่มีขอบและเชิงช่องหลุดออกมาที่ด้านขวาของย่อหน้า
ทำให้ภาพหลุดออกมาที่ด้านขวาของย่อหน้า และเพิ่มขอบและเชิงช่องของภาพ
ภาพที่มีหัวข้อหลุดออกมาที่ด้านขวา
ทำให้ภาพที่มีหัวข้อหลุดออกมาที่ด้านขวา
ทำให้ตัวอักษรแรกของย่อหน้าหลุดออกมาที่ด้านซ้าย
ทำให้ตัวอักษรแรกของย่อหน้าหลุดออกมาที่ด้านซ้ายและตั้งรูปแบบตัวอักษรนั้น
สร้างเว็บไซต์ด้วยฟลอตติ่ง
สร้างหน้าเเรกที่มีแนวนาฬิกานอร์ท หัวเรื่อง ท้ายเรื่อง แนวนาฬิกาด้านซ้ายและเนื้อหาหลักด้วยวิธีฟลอตติ่ง

ทั้งหมดของคุณสมบัติฟลอตติ่งใน CSS

ขอบคุณ บรรยาย
box-sizing กำหนดวิธีการคำนวณความกว้างและสูงขององค์ประกอบ คือ พวกนั้นควรรวมด้านช่องว่างด้านในและขอบหรือไม่
clear กำหนดว่าองค์ประกอบใดที่สามารถหล่องข้างข้างองค์ประกอบที่ถูกลบและข้างใด
float กำหนดว่าองค์ประกอบจะหล่องเท่าไร
overflow กำหนดว่าจะเกิดอะไรเมื่อเนื้อหาที่เกินขององค์ประกอบเกิดขึ้นในหลอดหรือตัวประกอบ
overflow-x กำหนดว่าจะกระทำอย่างไรเมื่อเนื้อหาขององค์ประกอบที่เกินของตัวประกอบเกิดขึ้นในขอบเขตที่เกินขององค์ประกอบที่แนวนอก
overflow-y กำหนดว่าจะกระทำอย่างไรเมื่อเนื้อหาขององค์ประกอบที่เกินของตัวประกอบเกิดขึ้นในขอบเขตที่เกินขององค์ประกอบ