ทำแบบคอลัมน์ผสม

ฝึกทำแบบคอลัมน์ผสม

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

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

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

ในตัวอย่างนี้ เราจะสร้างรูปแบบสี่คอลัมน์ ซึ่งจะเปลี่ยนเป็นสองคอลัมน์เมื่อความกว้างของหน้าจอต่ำกว่า 900 พิกเซล แต่ในขณะที่ความกว้างของหน้าจอต่ำกว่า 600 พิกเซล คอลัมน์จะจับตัวกันแทนที่จะจัดแบบย่อย */

/* สร้างคอลัมน์สี่เส้นที่มีขนาดเท่ากัน และทำให้พวกเขาเพลิงร่วมกัน */
.column {
  float: left;
  width: 25%;
}
/* ล้างการเพลิง */
.row:after {
  content: "";
  display: table;
   clear: both;
}
/* การจัดการแบบตอบสนอง - ทำให้รูปแบบเปลี่ยนจากสี่คอลัมน์เป็นสองคอลัมน์ */
@media screen and (max-width: 900px) {
  .column {
    width: 50%;
  }
}
/* การจัดการแบบตอบสนอง - ทำให้คอลัมน์หลักฐานจับตัวกันแทนที่จะจัดแบบย่อย */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

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

相关页面

教程：CSS 网站布局

教程：CSS 响应式网页设计