ສໍາລັບເວລາຫຼາຍປີ, CSS Floats ໄດ້ມີຄວາມຈໍາເປັນທີ່ສຸດ, ແຕ່ມີຄວາມຈໍາເປັນ, ໃນການສ້າງຮູບແບບເວັບໄຊທ໌. ຖ້າການອອກແບບຂອງທ່ານເອີ້ນວ່າສໍາລັບຫລາຍຄໍລໍາ, ທ່ານໄດ້ຫັນໄປຫາລອຍ . ບັນຫາທີ່ມີວິທີນີ້ແມ່ນວ່າ, ເຖິງວ່າຈະມີຄວາມ ingenuity incredible ທີ່ອອກແບບເວັບໄຊຕ໌ / ພັດທະນາໄດ້ສະແດງໃຫ້ເຫັນໃນການສ້າງສະຖານທີ່ສະລັບສັບຊ້ອນ, float CSS ບໍ່ໄດ້ຫມາຍຄວາມວ່າຈະຖືກນໍາໃຊ້ໃນວິທີການນີ້.
ໃນຂະນະທີ່ການພັດທະນາຂອງ floats ແລະ CSS ແນ່ນອນວ່າຈະມີສະຖານທີ່ໃນການອອກແບບເວັບໃນເວລາຫລາຍປີຈະມາເຖິງ, ເຕັກນິກການຈັດຮູບແບບໃຫມ່ໆລວມທັງ CSS Grid ແລະ Flexbox ແມ່ນໃຫ້ຜູ້ອອກແບບເວັບໄຊທ໌ໃຫມ່ໆເພື່ອສ້າງຮູບແບບເວັບໄຊທ໌ຂອງເຂົາເຈົ້າ. ເຕັກນິກການຈັດຮູບແບບໃຫມ່ອີກຢ່າງຫນຶ່ງທີ່ສະແດງໃຫ້ເຫັນຫຼາຍຢ່າງທີ່ມີທ່າແຮງແມ່ນ CSS Columns ຫຼາຍ.
CSS Columns ໄດ້ປະມານ 2-3 ປີແລ້ວ, ແຕ່ວ່າການຂາດການສະຫນັບສະຫນູນໃນຕົວທ່ອງເວັບທີ່ມີອາຍຸ (ສ່ວນຫຼາຍແມ່ນອິນເຕີເນັດ Explorer) ໄດ້ເກັບຮັກສາຜູ້ຊ່ຽວຊານດ້ານເວັບຕ່າງໆຈາກການໃຊ້ຮູບແບບເຫຼົ່ານີ້ໃນການຜະລິດຂອງພວກເຂົາ.
ດ້ວຍການສິ້ນສຸດຂອງການສະຫນັບສະຫນູນສໍາລັບຮຸ່ນເກົ່າຂອງ IE, ບາງຜູ້ອອກແບບເວັບໃນປະຈຸບັນໄດ້ທົດລອງໃຊ້ຕົວເລືອກແບບ CSS ໃຫມ່, CSS Columns ລວມແລ້ວ, ແລະຊອກຫາວ່າພວກເຂົາມີການຄວບຄຸມຫຼາຍດ້ວຍວິທີການໃຫມ່ເຫຼົ່ານີ້ກ່ວາພວກເຂົາເຮັດກັບ floats.
ພື້ນຖານຂອງຄໍລໍາ CSS
ໃນຖານະເປັນຊື່ຂອງມັນສະແດງໃຫ້ເຫັນ, ຄໍລໍາ CSS Multiple Columns (ທີ່ເອີ້ນວ່າ CSS3 ຄໍລໍາຮູບແບບຄໍລໍາ) ອະນຸຍາດໃຫ້ທ່ານແບ່ງປັນເນື້ອຫາເປັນຈໍານວນທີ່ກໍານົດໄວ້ຂອງຄໍລໍາ. ຄຸນສົມບັດ CSS ພື້ນຖານທີ່ສຸດທີ່ທ່ານຈະໃຊ້ແມ່ນ:
- column-count
- column-gap
ສໍາລັບຄໍລໍານັບ, ທ່ານລະບຸຈໍານວນຂອງຄໍລໍາທີ່ທ່ານຕ້ອງການ. ຊ່ອງຫວ່າງຂອງຖັນຈະເປັນຂີ້ເຫຍື້ອຫຼືຊ່ອງຫວ່າງລະຫວ່າງຄໍລໍາເຫຼົ່ານັ້ນ. ຕົວທ່ອງເວັບຈະໃຊ້ຄ່າເຫຼົ່ານີ້ແລະແບ່ງປັນເນື້ອໃນຢ່າງລະອຽດເຂົ້າໄປໃນຈໍານວນຄໍລໍາທີ່ທ່ານລະບຸ.
ຕົວຢ່າງທົ່ວໄປຂອງຄໍລໍາ CSS ຫຼາຍໆຢ່າງໃນການປະຕິບັດແມ່ນຈະແບ່ງປັນເນື້ອໃນຂໍ້ຄວາມເປັນຫລາຍຄໍລໍາ, ຄ້າຍຄືກັບສິ່ງທີ່ທ່ານຈະເຫັນໃນບົດຄວາມໃນຫນັງສືພິມ. ບອກວ່າທ່ານມີ HTML markup ຕໍ່ໄປນີ້ (ສັງເກດວ່າສໍາລັບຈຸດປະສົງຕົວຢ່າງ, ຂ້າພະເຈົ້າພຽງແຕ່ໃສ່ການເລີ່ມຕົ້ນຂອງວັກຫນຶ່ງ, ໃນຂະນະທີ່ໃນປະຕິບັດອາດຈະມີຫລາຍຂໍ້ສັບຕ່າງໆໃນເນື້ອໃນນີ້):
ຫົວຂໍ້ຂອງບົດຄວາມຂອງທ່ານ
ຈິນຕະນາການຫລາຍວັກວັກຂອງບົດເລື່ອງນີ້ ...
ຖ້າທ່ານຂຽນສະໄຕ CSS ເຫລົ່ານີ້ແລ້ວ:
content {-moz-column-count: 3; -webkit-column-count: 3; column-count: 3 -moz-column gap: 30px; -webkit-column gap: 30px; column-gap: 30px; }ກົດລະບຽບ CSS ນີ້ຈະແບ່ງປັນການແບ່ງປັນ "ເນື້ອໃນ" ເປັນ 3 ຄໍລໍາເທົ່າທຽມກັນທີ່ມີຊ່ອງຫວ່າງຂອງ 30 pixels ລະຫວ່າງພວກເຂົາ. ຖ້າທ່ານຕ້ອງການສອງຄໍລໍາແທນທີ່ຈະ 3, ທ່ານພຽງແຕ່ຈະປ່ຽນຄ່າດັ່ງກ່າວແລະຕົວທ່ອງເວັບຈະຄິດໄລ່ຄວາມກວ້າງໃຫມ່ຂອງຄໍລໍາເຫລົ່ານັ້ນເພື່ອແບ່ງປັນເນື້ອຫາໃຫ້ເທົ່າທຽມກັນ. ສັງເກດເຫັນວ່າພວກເຮົາໃຊ້ຄຸນສົມບັດຜູ້ຜະລິດ - ນໍາຫນ້າທໍາອິດ, ປະຕິບັດຕາມຄໍາປະກາດທີ່ບໍ່ແມ່ນຄໍານໍາຫນ້າ.
ດັ່ງທີ່ງ່າຍດັ່ງນີ້, ການນໍາໃຊ້ໃນວິທີນີ້ແມ່ນເປັນຄໍາຖາມສໍາລັບການນໍາໃຊ້ເວັບໄຊທ໌. ແມ່ນແລ້ວ, ທ່ານສາມາດແບ່ງປັນເນື້ອຫາເຂົ້າໄປໃນຫລາຍໆຄໍລໍາ, ແຕ່ນີ້ອາດຈະບໍ່ເປັນປະສົບການການອ່ານທີ່ດີທີ່ສຸດສໍາລັບ Web, ໂດຍສະເພາະຖ້າຄວາມສູງຂອງຄໍລໍາເຫຼົ່ານີ້ຢູ່ພາຍໃຕ້ "ຫນ້າຈໍ".
ຫຼັງຈາກນັ້ນຜູ້ອ່ານຈະຕ້ອງເລື່ອນຂຶ້ນແລະລົງເພື່ອອ່ານເນື້ອຫາເຕັມ. ຍັງ, ຫຼັກຂອງ CSS Columns ແມ່ນງ່າຍດາຍທີ່ທ່ານເຫັນຢູ່ທີ່ນີ້, ແລະມັນສາມາດຖືກນໍາໃຊ້ເພື່ອເຮັດຫຼາຍກວ່າພຽງແຕ່ແບ່ງປັນເນື້ອໃນຂອງວັກບາງ - ມັນກໍ່ສາມາດນໍາໃຊ້ສໍາລັບຮູບແບບ.
Layout ດ້ວຍ CSS Columns
ບອກວ່າທ່ານມີເວັບໄຊທີ່ມີພື້ນທີ່ເນື້ອຫາທີ່ມີ 3 ຄໍລໍາເນື້ອຫາ. ນີ້ແມ່ນຮູບແບບເວັບໄຊທ໌ທີ່ເປັນປົກກະຕິຫຼາຍ, ແລະເພື່ອບັນລຸບັນດາ 3 ຄໍລໍາ, ທ່ານມັກຈະເລື່ອນການແບ່ງປັນທີ່ຢູ່ໃນ. ດ້ວຍ CSS ຫຼາຍຄໍລໍາ, ມັນງ່າຍຫຼາຍ.
ນີ້ແມ່ນຕົວຢ່າງ HTML ບາງ:
ຂ່າວຫຼ້າສຸດ
ເນື້ອຫາຈະໄປທີ່ນີ້
ຈາກບລັອກຂອງພວກເຮົາ
ເນື້ອຫາຈະໄປທີ່ນີ້ ...
Upcoming Events
ເນື້ອຫາຈະໄປທີ່ນີ້ ... < p>
CSS ເພື່ອເຮັດໃຫ້ຄໍລໍາຫຼາຍເຫຼົ່ານີ້ເລີ່ມຕົ້ນດ້ວຍສິ່ງທີ່ທ່ານເຫັນກ່ອນຫນ້ານີ້:
content {-moz-column-count: 3; -webkit-column-count: 3; column-count: 3 -moz-column gap: 30px; -webkit-column gap: 30px; column-gap: 30px; }ໃນປັດຈຸບັນ, ສິ່ງທ້າທາຍນີ້ແມ່ນວ່າ, ເນື່ອງຈາກວ່າຕົວທ່ອງເວັບຕ້ອງການແບ່ງປັນເນື້ອໃນນີ້ຢ່າງເທົ່າທຽມກັນ, ດັ່ງນັ້ນຖ້າຄວາມຍາວເນື້ອໃນຂອງພະແນກເຫຼົ່ານີ້ແຕກຕ່າງກັນ, ຕົວທ່ອງເວັບທີ່ຈະແບ່ງປັນເນື້ອໃນຂອງສ່ວນບຸກຄົນ, ເພີ່ມການເລີ່ມຕົ້ນຂອງມັນໄປຫາຫນຶ່ງຄໍລໍາແລະ ຫຼັງຈາກນັ້ນສືບຕໍ່ເຂົ້າໄປໃນອື່ນ (ທ່ານສາມາດເບິ່ງນີ້ໂດຍການໃຊ້ລະຫັດນີ້ເພື່ອດໍາເນີນການທົດລອງແລະເພີ່ມຄວາມຍາວທີ່ແຕກຕ່າງກັນຂອງເນື້ອໃນພາຍໃນແຕ່ລະພະແນກ)!
ນັ້ນບໍ່ແມ່ນສິ່ງທີ່ທ່ານຕ້ອງການ. ທ່ານຕ້ອງການແຕ່ລະພະແນກເຫຼົ່ານີ້ເພື່ອສ້າງຄໍລໍາທີ່ແຕກຕ່າງກັນແລະ, ບໍ່ວ່າເນື້ອຫາຂອງຂະຫນາດສ່ວນບຸກຄົນຂະຫນາດໃຫຍ່ຫລືຂະຫນາດນ້ອຍຈະເປັນແນວໃດ, ທ່ານບໍ່ຕ້ອງການແບ່ງປັນມັນ. ທ່ານສາມາດບັນລຸເປົ້າຫມາຍນີ້ໄດ້ໂດຍການເພີ່ມເສັ້ນສະເພາະຂອງ CSS ນີ້:
content div {display: inline-block; }ນີ້ຈະບັງຄັບໃຫ້ພະແນກທີ່ຢູ່ພາຍໃນຂອງ "ເນື້ອຫາ" ຈະຍັງຄົງ intact ເຖິງແມ່ນວ່າຕົວທ່ອງເວັບແບ່ງປັນນີ້ເຂົ້າໄປໃນຄໍລໍາຫຼາຍ. ເຖິງແມ່ນວ່າດີກວ່າ, ເນື່ອງຈາກວ່າພວກເຮົາບໍ່ໄດ້ໃຫ້ສິ່ງໃດທີ່ນີ້ມີຄວາມກວ້າງຄົງທີ່, ຄໍລໍາເຫຼົ່ານີ້ຈະປັບຂະຫນາດໂດຍອັດຕະໂນມັດໃນຂະນະທີ່ຕົວທ່ອງເວັບປັບຂະຫນາດ, ເຮັດໃຫ້ມັນເປັນຄໍາຮ້ອງສະຫມັກທີ່ເຫມາະສົມສໍາລັບ ເວັບໄຊທ໌ຕອບສະຫນອງ . ມີແບບ "ເສັ້ນໃນແບບຕັນ" ໃນສະຖານທີ່, ແຕ່ລະສ່ວນສາມຂອງທ່ານຈະເປັນຄໍລໍາທີ່ແຕກຕ່າງກັນຂອງເນື້ອຫາ.
ການໃຊ້ Column-Width
ມີຄຸນສົມບັດອື່ນນອກຈາກ "ຄໍລໍານັບ" ທີ່ທ່ານສາມາດນໍາໃຊ້, ແລະອີງຕາມຄວາມຕ້ອງການຂອງຮູບແບບຂອງທ່ານ, ມັນອາດຈະເປັນທາງເລືອກທີ່ດີກວ່າສໍາລັບເວັບໄຊທ໌ຂອງທ່ານ. ນີ້ແມ່ນ "width ຂອງຄໍລໍາ". ການນໍາໃຊ້ HTML markup ດຽວກັນດັ່ງທີ່ສະແດງໄວ້ກ່ອນຫນ້ານີ້, ພວກເຮົາແທນທີ່ຈະເຮັດແບບນີ້ກັບ CSS ຂອງພວກເຮົາ:
content {-moz-column width: 500px; -webkit-column width: 500px; width column: 500px; -moz-column gap: 30px; -webkit-column gap: 30px; column-gap: 30px; } content div {display: inline-block }ວິທີທີ່ເຮັດວຽກນີ້ແມ່ນວ່າຕົວທ່ອງເວັບໃຊ້ "ຄໍລໍາ width" ນີ້ເປັນມູນຄ່າສູງສຸດຂອງຄໍລໍາທີ່ວ່າ. ດັ່ງນັ້ນ, ຖ້າປ່ອງຢ້ຽມຂອງຕົວທ່ອງເວັບມີຄວາມກວ້າງຫນ້ອຍກວ່າ 500 ພິກະເຊນ, ການແບ່ງສາມນີ້ຈະປາກົດຢູ່ໃນຄໍລໍາດຽວ, ຫນຶ່ງຂອງ tops ຂອງຄົນອື່ນ. ນີ້ແມ່ນຮູບແບບປົກກະຕິທີ່ໃຊ້ສໍາລັບຮູບແບບຫນ້າຈໍມືຖື / ຂະຫນາດນ້ອຍ.
ໃນຂະນະທີ່ຄວາມກວ້າງຂອງເບົາເຊີຈະສູງພໍທີ່ຈະພໍດີກັບ 2 ຄໍລໍາພ້ອມກັບຊ່ອງຫວ່າງຂອງຄໍລໍາທີ່ກໍານົດໄວ້, ຕົວທ່ອງເວັບຈະໄດ້ຈາກຮູບແບບຄໍລໍາດຽວກັບສອງຄໍລໍາ. ສືບຕໍ່ເພີ່ມທະວີຄວາມກວ້າງຂອງຫນ້າຈໍແລະໃນທີ່ສຸດ, ທ່ານຈະໄດ້ຮັບການອອກແບບ 3 ຄໍລໍາ, ແຕ່ລະພາກສ່ວນສາມຂອງພວກເຮົາສະແດງຢູ່ໃນຖັນຂອງຕົນເອງ. ອີກເທື່ອຫນຶ່ງ, ນີ້ແມ່ນວິທີທີ່ດີທີ່ຈະໄດ້ຮັບການຕອບສະຫນອງ, ການຈັດຮູບແບບທີ່ ເປັນມິດກັບອຸປະກອນ ຕ່າງໆ, ແລະທ່ານກໍ່ບໍ່ຈໍາເປັນຕ້ອງໃຊ້ ຄໍາຖາມຂອງສື່ ເພື່ອປ່ຽນຄໍເຕົ້າໄຂ່ຮູບແບບ!
ຄຸນສົມບັດຄໍລໍາອື່ນໆ
ນອກຈາກຄຸນສົມບັດທີ່ກວມເອົາທີ່ນີ້ຍັງມີຄຸນສົມບັດສໍາລັບ "ຄໍລໍາກົດ", ລວມທັງຄ່າສີ, ແບບແລະມູນຄ່າ width ທີ່ອະນຸຍາດໃຫ້ທ່ານສ້າງກົດລະບຽບລະຫວ່າງຄໍລໍາຂອງທ່ານ. ເຫຼົ່ານີ້ຈະຖືກນໍາໃຊ້ແທນທີ່ຈະມີຊາຍແດນຖ້າທ່ານຕ້ອງການມີສາຍບາງສ່ວນທີ່ແຕກແຍກຖັນຂອງທ່ານ.
ເວລາທີ່ຈະທົດລອງ
ໃນປະຈຸບັນ, CSS Multiple Column Layout ແມ່ນສະຫນັບສະຫນູນດີຫຼາຍ. ມີຄໍານໍາຫນ້າ, ຫຼາຍກວ່າ 94% ຂອງຜູ້ໃຊ້ເວັບຈະສາມາດເບິ່ງຮູບແບບເຫຼົ່ານີ້ແລະວ່າກຸ່ມທີ່ບໍ່ໄດ້ຮັບການສະຫນັບສະຫນູນກໍ່ຈະເປັນຮຸ່ນເກົ່າແກ່ຂອງ Internet Explorer ເຊິ່ງທ່ານອາດຈະບໍ່ສະຫນັບສະຫນູນອີກຕໍ່ໄປ.
ມີລະດັບການສະຫນັບສະຫນູນນີ້ໃນປັດຈຸບັນ, ບໍ່ມີເຫດຜົນທີ່ຈະບໍ່ເລີ່ມຕົ້ນທົດລອງກັບຄໍລໍາ CSS ແລະນໍາໃຊ້ຮູບແບບເຫຼົ່ານີ້ໃນເວັບໄຊທ໌ທີ່ມີການຜະລິດພ້ອມໆກັນ. ທ່ານສາມາດເລີ່ມຕົ້ນການທົດລອງຂອງທ່ານໂດຍໃຊ້ HTML ແລະ CSS ທີ່ນໍາສະເຫນີໃນບົດຄວາມນີ້ແລະຫລິ້ນຮອບກັບຄຸນຄ່າທີ່ແຕກຕ່າງກັນເພື່ອເບິ່ງສິ່ງທີ່ຈະເຮັດວຽກທີ່ດີທີ່ສຸດສໍາລັບຮູບແບບເວັບໄຊທ໌ຂອງທ່ານ.