วิธีการจัดลำดับภาพแบบขนาน

เรียนรู้วิธีการจัดลำดับภาพแบบขนาน

วิธีการจัดรูปภาพขนาน

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

<div class="row">
  <div class="column">
    <img src="img_snow.jpg" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="img_forest.jpg" alt="Forest" style="width:100%">
  </div>
  <div class="column">
    <img src="img_mountains.jpg" alt="Mountains" style="width:100%">
  </div>
</div>

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

หลายวิธีการใช้ CSS float นิยายสร้างรูปภาพที่แบ่งขนาน:

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

/* สามกล่องรูปภาพ (สี่กล่องรูปภาพใช้ 25%, สองกล่องรูปภาพใช้ 50%, และอย่างเดียวกันกับนี้) */
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}
/* ล้างเลื่อนของกล่องรูปภาพหลังมัน */
.row::after {
  content: "";
  clear: both;
  display: table;
}

ลองเดาทางเดียวกับเรา

หลายวิธีการใช้ CSS flex นิยายสร้างรูปภาพที่แบ่งขนาน:

ตัวอย่างโครงสร้าง Flexbox

.row {
  display: flex;
}
.column {
  flex: 33.33%;
  padding: 5px;
}

ลองเดาทางเดียวกับเรา

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

คำแนะนำ:หากต้องการข้อมูลเพิ่มเติมเกี่ยวกับโมดูลโครงสร้างที่ยอดเยี่ยม โปรดอ่าน คู่มือ CSS Flexbox。

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

หรือ คุณสามารถเพิ่มคำสั่งค้นหามีเดียวเพื่อทำให้รูปภาพยู่ตรงของที่ความกว้างหน้าจอเฉพาะระยะใดระยะหนึ่ง แทนที่จะแบ่งขนาน

ตัวอย่างด้านล่างจะทำให้รูปภาพยู่ตรงของเมื่อมีความกว้างหน้าจอ 500px หรือน้อยกว่า

ตัวอย่างโครงสร้างที่ตอบสนอง

/* โครงสร้างการตอบสนองต่ออุปกรณ์ - ทำให้สามคอลัมน์ตั้งขึ้นกันแทนที่จะมีทั้งหมดแบบขนาน */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

ลองเดาทางเดียวกับเรา

หากต้องการข้อมูลเพิ่มเติมเกี่ยวกับการค้นหามีเดียว โปรดอ่าน คู่มือ CSS การค้นหามีเดียว。

หน้าที่เกี่ยวข้อง

คู่มือ:CSS รูปภาพ

คู่มือ:CSS การขนานแนวน้ำ

คู่มือ:CSS คลังรูปภาพ