ບິດການຈັດການ: ການຈັດການສອງອາຍຸໃຫ້ບັນຈຸບໍ່ໄດ້

ບິດການຈັດການສອງອາຍຸໃຫ້ບັນຈຸບໍ່ໄດ້

ບິດ 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 Module, ຂໍ້ສະເໜີການອ່ານຂອງພວກເຮົາ: CSS Flexbox 教程.

ການເພີ່ມຄວາມຕອບສະໜອງ

ຄວາມຈຳນວນດັ່ງກ່າວຈະບໍ່ມີຄວາມສະຫຼາດໃນອຸປະກອນທີ່ມີຄວາມກວດດົບ, ຍ້ອນວ່າສອງອາຍຸຈະບັນຈຸບໍ່ວ່າຫຼາຍໃນເວລາທີ່ກໍາລັງມີຄວາມກວດດົບ.

ເພື່ອສ້າງການຈັດການຕອບສະໜອງສະໜາມ, ເພື່ອປ່ຽນຈາກການຈັດການສອງອາຍຸໃຫ້ເປັນການຈັດການຄວາມກວດດົບທັງໝົດໃນອຸປະກອນທີ່ມີຄວາມກວດດົບ, ຂໍ້ສະເໜີການຄຳນວນພາຍໃນ:

ຄວາມຈຳນວນ

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

ສອບສວນຕົວເອງ

ເວັບໄຊທີ່ກ່ຽວກັບ

教程：CSS 表格

教程：CSS 浮动

教程：CSS Flexbox