CSS Layout - Float Example

ນີ້ແມ່ນຫົວຂໍ້ທີ່ມີການກະຈາຍຄືນການສ້າງບັນນາທິການທີ່ຫຼາຍທີ່ນິຍົມ.

ການຈັດກັບບັນນາທິການ / ບັນນາທິການທີ່ມີລະດັບດຽວກັນ

Box 1
Box 2
Box 1
Box 2
Box 3

ຜ່ານການໃຊ້ float ປະສານທີ່ອະນຸຍາດໃຫ້ພວກເຮົາກະຈາຍຄືນເນື້ອຫາງກັນຢ່າງງ່າຍດາຍ:

ກໍານົດ

* {
  box-sizing: border-box;
}
.box {
  float: left;
  width: 33.33%; /* ສາມບັນນາທິການ (ສີ່ບັນນາທິການໃຊ້ 25%, ສອງບັນນາທິການໃຊ້ 50%, ອີກອີກອີກ) */
  padding: 50px; /* ຖ້າຈະຕ້ອງເພີ່ມຄວາມລະດັບລະຫວ່າງພາບຕາມຄືນ */
}

ສວດກາວັດສະນະຢູ່ຕະຫຼອດ.

ຫຍັງກໍ່ແມ່ນ box-sizing?

ເຈົ້າສາມາດສ້າງບັນນາທິການກະຈາຍກັນຢ່າງງ່າຍດາຍ. ແຕ່ເມື່ອເຈົ້າເພີ່ມເນື້ອຫາງເພີ່ມລະດັບລະດັບບັນນາທິການ (ອີກຕາມຄືນ padding ຫລື border) ບັນນາທິການຈະຖືກທໍາລາຍ. box-sizing ປະສານທີ່ອະນຸຍາດໃຫ້ພວກເຮົາກວມລະດັບກາງໃນລະດັບລະດັບຂອງບັນນາທິການ (ແລະລະດັບ) ກັບກາງຕົວແລະກາງບານກາງບັນນາທິການ ເພື່ອຮັກສາກາງກາງບັນນາທິການບໍ່ອາດຖືກຫັກຫັງ.

ເຈົ້າສາມາດພິຈາລະນາໃນ: ກົດໝາຍ Box Sizing CSS ໃນວັນນີ້ເຈົ້າຈະຮຽນຫຼາຍກວ່າກ່ຽວກັບປະສານ box-sizing.

ພາບລວມກັນ

ບັນນາທິການນີ້ (The grid of boxes) ກໍ່ສາມາດສະແດງພາບລວມກັນ:

ກໍານົດ

.img-container {
  float: left;
  width: 33.33%; /* ສາມບັນນາທິການ (ສີ່ບັນນາທິການໃຊ້ 25%, ສອງບັນນາທິການໃຊ້ 50%, ອີກອີກອີກ) */
  padding: 5px; /* ຖ້າຈະຕ້ອງເພີ່ມຄວາມລະດັບລະຫວ່າງບັນນາທິການຕາມຄືນ */
}

ສວດກາວັດສະນະຢູ່ຕະຫຼອດ.

ບັນນາທິການທີ່ມີລະດັບດຽວກັນ

ໃນຫົວຂໍ້ນີ້ເຈົ້າໄດ້ຮຽນວ່າເພື່ອຈະກະຈາຍຄືນຕາຂອງບັນນາທິການຢ່າງທີ່ມີລະດັບດວງດຽວກັນ. ແຕ່ການສ້າງບັນນາທິການທີ່ມີລະດັບທີ່ດຽວກັນບໍ່ງົບງົມ. ແຕ່ວ່າການແກ້ໄຂທີ່ຫຼາຍຄວາມຫຼັງຈະຕັ້ງລະດັບທີ່ສະເພາະຄືດັ່ງກ່າວ:

Box 1

Some content, some content, some content

Box 2

Some content, some content, some content

Some content, some content, some content

Some content, some content, some content

ກໍານົດ

.box {
  height: 500px;
}

ສວດກາວັດສະນະຢູ່ຕະຫຼອດ.

但是，这么做就失去了弹性。如果可以保证框中始终有相同数量的内容，那是可以的。但是很多时候，内容是不一样的。如果您在手机上尝试上例，则会看到第二个框的内容将显示在框的外部。这是 CSS3 Flexbox 派上用场的地方 - 因为它可以自动拉伸框使其与最长的框一样长：

ກໍານົດ

使用 Flexbox 创建弹性框：

Box 1 - 这是一些文本，以确保内容真的很高。这是一些文本，以确保内容真的很高。这是一些文本，以确保内容真的很高。这是一些文本，以确保内容真的很高。这是一些文本，以确保内容真的很高。
Box 2 - ຄວາມຍາວຂອງຂ້ອຍຈະຕິດຕາມກັບ Box 1.

ສວດກາວັດສະນະຢູ່ຕະຫຼອດ.

Flexbox ມີບັນຫາພຽງແຕ່ວ່າມັນບໍ່ມີຜົນງານໃນ Internet Explorer 10 ຫຼືເກົ່າກວ່າ. ທ່ານສາມາດຄົ້ນຫາຫຼາຍຂໍ້ມູນອີກໃນຕອນອາຫານຂອງພວກເຮົາ. Flexbox CSS ຮຽນຫຼາຍຂໍ້ມູນກ່ຽວກັບການຈັດວາງ Flexbox Module.

ລາຍການນຳເຂົ້າ

ນໍາໃຊ້ float ນໍາໃຊ້ພັດທະນາກັບລາຍການພາດແຕ່ງທີ່ສາມາດສ້າງແບບມີການນຳເຂົ້າຫຼັງສະໜາມ.

ກໍານົດ

ສວດກາວັດສະນະຢູ່ຕະຫຼອດ.

ກໍານົດ Web Layout

ນໍາໃຊ້ float ຜົນປະກອບທີ່ສົມທົບທັງໝົດການຈັດວາງ Web ຂອງເວັບໄຊ້ກໍ່ມີຫຼາຍຢ່າງ.

ກໍານົດ

.header, .footer {
  background-color: grey;
  color: white;
  padding: 15px;
}
.column {
  float: left;
  padding: 15px;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
.menu {
  width: 25%;
}
.content {
  width: 75%;
}

ສວດກາວັດສະນະຢູ່ຕະຫຼອດ.

ກໍານົດຫຼັກການທີ່ຫຼາຍຢ່າງຫຼາຍ.

ວົງວອກຊຸດທໍາອິດຂອງບັນດາຮູບພາບກັບວົງກວດກາງພາຍໃນແລະການການປ່ຽນອາກາດບັງຫຼັງຫຼັງສະໜາມ.
ນໍາໃຊ້ວົງວອກຊຸດທໍາອິດຂອງບັນດາຮູບພາບຫຼັງສະໜາມວັດສະນະ. ສະແດງວົງກວດກາງພາຍໃນຮູບພາບແລະການການປ່ຽນອາກາດບັງຫຼັງ.
ວົງວອກຊຸດທໍາອິດຂອງບັນດາຮູບພາບຫຼັງສະໜາມ.
ນໍາໃຊ້ວົງວອກຊຸດທໍາອິດຂອງບັນດາຮູບພາບກັບຫົວຂໍ້.
ນໍາໃຊ້ວົງວອກຊຸດທໍາອິດຂອງວັດສະນະຫຼັງສະໜາມ.
ນໍາໃຊ້ວົງວອກຊຸດທໍາອິດຂອງວັດສະນະຂອງວັດສະນະຫຼັງສະໜາມເປັນຫຼັງສະໜາມ.
ນໍາໃຊ້ການວາງວອກເພື່ອສ້າງເວັບໄຊ້
ນໍາໃຊ້ການວາງວອກເພື່ອສ້າງເວັບໄຊ້ທີ່ມີແບບການນຳເຂົ້າຫຼັງສະໜາມເຕັກໂນໂລຊີພາກຂວາ, ຫົວໜ້າ, ຫົວເຫຼືອ, ແລະຂອງບັນຫຼັງ.

ຜົນປະກອບ CSS ທີ່ນໍາໃຊ້ລົງກວດວາງ

ຜົນປະກອບ ການອະທິບາຍ
box-sizing ການອອກຄຳນົດການຄາດການວົງວອກແລະວົງຫຼັງຂອງປະກອບສິ່ງ: ພວກເຂົາຄວນບັນຈຸບັນຫຼັງຂອງບັນຫຼັງແລະວົງຂອງບັນຫຼັງຫຼືບໍ່。
clear 指定哪些元素可以在被清除的元素旁边以及在哪一侧浮动。
float 指定元素应如何浮动。
overflow 指定如果内容溢出元素框会发生什么情况。
overflow-x 指定当溢出元素的内容区域时，如何处理内容的左/右边缘。
overflow-y 指定当溢出元素的内容区域时，如何处理内容的上/下边缘。