ວິທີການສ້າງ: ການຈັດວາງສາຍສາຍ

ວິທີການສ້າງການຈັດວາງສາຍສາຍ

ບາງການທີໜຶ່ງ - ສະແດງ HTML:

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

ບາງການທີສອງ - ສະແດງ CSS:

ໃນຕົວຢ່າງນີ້ ພວກເຮົາຈະສ້າງບໍ່ມີຄວາມສະແດງດຽວກັນສາຍ:

ຕົວຢ່າງ

.column {
  float: left;
  width: 33.33%;
}
/* ການລົບກວດຫຼັງສາຍ */
.row:after {
  content: "";
  display: table;
  clear: both;
}

ພະຍາຍາມດຽວວ່າ

ໃນຕົວຢ່າງນີ້ ພວກເຮົາຈະສ້າງບໍ່ມີຄວາມສະແດງດຽວກັນສາຍ:

ຕົວຢ່າງ

.column {
  float: left;
}
.left, .right {
  width: 25%;
}
.middle {
  width: 50%;
}

ພະຍາຍາມດຽວວ່າ

ໃນຕົວຢ່າງນີ້ ພວກເຮົາຈະສ້າງການຈັດວາງຄວາມສະແດງການຈັດວາງສາຍສາຍ

ຕົວຢ່າງ

/* ການຈັດວາງຄວາມສະແດງ - ເມື່ອຂະໜາດໜ້າຈໍານວນຕໍ່າກວ່າ 600px ຈະໃຫ້ສາຍສາຍກັນ ບໍ່ແມ່ນຈະແຕ່ລວມກັນ */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

ພະຍາຍາມດຽວວ່າ

相关页面

教程：CSS 网站布局

教程：CSS 响应式网页设计