ວິທີການຕັດຕິດພາບຕັ້ງຢູ່ບ່ອນດຽວກັນ

ສຶກສາການໃຊ້ CSS ເພື່ອຕັດຕິດພາບຕັ້ງຢູ່ບ່ອນດຽວກັນ.

ວິທີຈັດພາບຕັ້ງໃນທິດທາງ

ບາງການທີ່ທັງໝົດ - ການເພີ່ມ 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 ການສ້າງກຳນວນພາບທີ່ຈັດຕັ້ງໃນທິດທາງ:

ການຈັດການ 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.

ຂໍ້ສັນຍາ:ສຳລັບຂໍ້ມູນຫຼາຍກວ່າກ່ຽວກັບການຈັດການຄວາມສາມາດຢູ່ Flexbox ກະລຸນາເບິ່ງ ການສອນ CSS Flexbox.

ການເພີ່ມຄວາມສາມາດ

ຫຼື ທ່ານສາມາດເພີ່ມການຊອກຫາສື່ມວນຊົນເພື່ອຈັດພາບຕັ້ງຢູ່ທິດທາງໃນເທັກອຸປະກອນທີ່ມີເທັກອຸປະກອນຫຼາຍກວ່າຫຼືຫຼາຍກວ່ານັ້ນ ຫຼືຫຼາຍກວ່ານັ້ນ.

ບົດສະຫຼຸບນີ້ຈະຈັດພາບຕັ້ງຢູ່ທິດທາງທີ່ມີເທັກອຸປະກອນທີ່ຫຼາຍກວ່າ 500px ຫຼືຫຼາຍກວ່ານັ້ນ:

ການຈັດການຄວາມສາມາດ

/* ການຈັດການຄວາມສາມາດ - ຈັດສາມກຳນວນທີ່ສະຫຼາກຫຼັງຈາກນັ້ນ */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

ທົດລອງຕົວເອງ

ສຳລັບຂໍ້ມູນຫຼາຍກວ່າກ່ຽວກັບການຊອກຫາສື່ມວນຊົນ ກະລຸນາເບິ່ງ ການສອນ CSS ການຊອກຫາສື່ມວນຊົນ.

ບັນດາສະຖານທີ່ກ່ຽວຂ້ອງ

ການສອນ:CSS 图像

ການສອນ:CSS ການປ່ຽນລະບຽບ

ການສອນ:CSS 图片库