ฝากเรียกสร้าง: ต้นตารางสี่คอลัมน์

ฝากเรียกสร้างต้นตารางสี่คอลัมน์

ขั้นที่หนึ่ง - เพิ่ม HTML:

<div class="row">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

ขั้นที่สอง - เพิ่ม CSS:

ในตัวอย่างนี้ เราจะสร้างต้นตารางสี่คอลัมน์

ตัวอย่าง

.column {
  float: left;
  width: 25%;
}
/* ล้างการหลุดเลื่อนหลังคอลัมน์ */
.row:after {
  content: "";
  display: table;
  clear: both;
}

สอดแนมด้วยตัวเอง

ในตัวอย่างนี้ เราจะสร้างตอบสนองต้นตารางสี่คอลัมน์

ตัวอย่าง

/* แบบจัดเรียงที่ตอบสนอง - เมื่อความกว้างของหน้าจอต่ำกว่า 600px ให้มีสามคอลัมน์ที่ตั้งอยู่ฝั่งตรงกัน แทนที่จะขนานตรงกัน */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

สอดแนมด้วยตัวเอง

相关页面

教程：CSS 网站布局

教程：CSS 响应式网页设计