จากการสร้าง: ตารางที่เรียงข้างต่อกัน

จากการเรียงตารางข้างต่อกัน

จาก CSS float สร้างตารางที่เรียงข้างต่อกัน

ตัวอย่าง

* {
  box-sizing: border-box;
}
/* สร้างรูปแบบคอลัมน์สอง */
.column {
  float: left;
  width: 50%;
  padding: 5px;
}
/* Clearfix (ล้างการหลุดน้ำหลัง) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

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

จาก CSS flex สร้างตารางที่เรียงข้างต่อกัน

ตัวอย่าง

* {
  box-sizing: border-box;
}
.row {
  display: flex;
}
.column {
  flex: 50%;
  padding: 5px;
}

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

จำเป็น:Flexbox ไม่ได้รับการสนับสนุนใน Internet Explorer 10 และตัวเลขต่ำกว่า ถึงแม้ว่าคุณจะใช้ float หรือ flex ขึ้นอยู่กับคุณ แต่ถ้าคุณต้องการสนับสนุน IE10 และตัวเลขต่ำกว่านั้น คุณควรใช้ float.

คำแนะนำ:เพื่อได้รับข้อมูลเพิ่มเติมเกี่ยวกับโมดูล Flexible Box Layout โปรดอ่านคู่มือของเรา CSS Flexbox คู่มือ.

เพิ่มความสามารถตอบสนอง

ตัวอย่างดังกล่าวจะดูไม่ดีบนอุปกรณ์เคลื่อนที่ เพราะคอลัมน์สองคอลัมน์จะเติมช่องที่เป็นหน้าจอมากเกินไป

เพื่อที่จะสร้างตารางที่มีความสามารถตอบสนองแบบรีสโปนซิฟ ทำให้ลำดับสองคอลัมน์เปลี่ยนจากการจัดเรียงแบบสองคอลัมน์เป็นการจัดเรียงเต็มกว้างบนอุปกรณ์เคลื่อนที่ โปรดเพิ่มมีเดียมความคิดดังนี้:

ตัวอย่าง

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

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

เพจที่เกี่ยวข้อง

教程：CSS 表格

教程：CSS 浮动

教程：CSS Flexbox