ວິທີການສ້າງ: ການວາງສອງວາງ

ວິທີການສ້າງການວາງສອງວາງ

ບາງການເຮັດທີໜຶ່ງ - ສະໜອງ HTML

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

ບາງການເຮັດທີ່ສອງ - ສະໜອງ CSS

ໃນບົດສະຫຼຸບນີ້，ພວກເຮົາຈະສ້າງສອງວາງມີແວດລະດັບວາງສອງວາງ

Floating ບົດສະຫຼຸບ

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

ທ້າທາຍສັນຕະວັດເອງ

ວິທີການສ້າງສອງວາງໃນ CSS Flexbox ແມ່ນວິທີທີ່ຫຼາຍທີ່ມີຕົ້ນໄປພຽງກວ່ານັ້ນ。ແຕ່ວ່າມັນບໍ່ສະໜັບສະໜຸນ Internet Explorer 10 ແລະກ່ວານີ້。

Flex ບົດສະຫຼຸບ

.row {
  display: flex;
}
.column {
  flex: 50%;
}

ທ້າທາຍສັນຕະວັດເອງ

ທ່ານສາມາດເລືອກການນຳໃຊ້ float ຫຼື flex ເພື່ອສ້າງການວາງສອງວາງ。ແຕ່ຖ້າທ່ານຕ້ອງການສະໜັບສະໜຸນ IE10 ແລະກ່ວານີ້，ທ່ານຄວນໃຊ້ float。

ຄຳແນະນຳສຳລັບຂໍ້ມູນຂອງ Flexible Box Layout Module ທີ່ຫຼາຍກວ່ານີ້，ບັນດາບັນທຶກຂອງພວກເຮົາ CSS Flexbox ການສອນ。

ໃນບົດສະຫຼຸບນີ້，ພວກເຮົາຈະສ້າງສອງວາງທີ່ບໍ່ມີແວດລະດັບ

ບົດສະຫຼຸບ

.column {
  float: left;
}
.left {
  width: 25%;
}
.right {
  width: 75%;
}

ທ້າທາຍສັນຕະວັດເອງ

ໃນບົດສະຫຼຸບນີ້，ພວກເຮົາຈະສ້າງການຕອບກັບການວາງສອງວາງ

ບົດສະຫຼຸບ

/* ການຕອບກັບຄູ່ວາງ - ຖ້າຂະໜາດຈໍາການສະແດງບໍ່ພໍກວ່າ 600px ຈະປະກອບສອງວາງຢູ່ບ່ອນດຽວແທນຂອງຈະພັດພອງ */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

ທ້າທາຍສັນຕະວັດເອງ

ບັນທຶກເວັບໄຊທີ່ກ່ຽວຂ້ອງ

ການສອນCSS 网站布局

ການສອນCSS ວັດຖຸຂອງການອອກໄອກະສານລະບົບການຕອບກັບ