ເນື້ອຫາ
- ບັນດາລາຍການທີ່ລະອຽດອ່ອນຢູ່ດ້ານເທິງ
- ເສື້ອຍືດໃສ່ເສື້ອຍືດທີ່ບໍ່ຕ້ອງການ
- ຖົງຕີນທີ່ເຕັມໄປໃນຊ່ອງຫວ່າງ
- ເດີນທາງໂດຍສະຫວັດດີພາບ
ມັນເປັນເວລາທ່ຽງຄືນ, ແລະນັ້ນ div ຢູ່ໃນເວັບໄຊທ໌້ຂອງທ່ານຍັງເບິ່ງຄືກັບ ໜ້າ ເອິກຂອງເດັກນ້ອຍ. ທຸກໆອົງປະກອບແມ່ນສັບສົນ, ແລະທຸກໆຄັ້ງທີ່ທ່ານຫລິ້ນກັບ CSS ຂອງ ສະແດງ ຊັບສິນ, ພວກເຂົາຈັດແຈງຕົວເອງໃຫ້ເປັນສິ່ງທີ່ບໍ່ມີປະໂຫຍດທັງ ໝົດ.
ຖ້າທ່ານມັກຂ້ອຍ, ທ່ານອາດຈະແກ້ໄຂບັນຫານີ້ໂດຍການສັບປ່ຽນພາຍໃຕ້ລົມຫາຍໃຈຂອງທ່ານແລະກາຍເປັນແປ້ນພິມຂອງທ່ານເລື້ອຍໆ. ແລະເຖິງແມ່ນວ່າກົນລະຍຸດດັ່ງກ່າວໄດ້ເຮັດວຽກ ສຳ ລັບຂ້ອຍມາກ່ອນ, ແຕ່ໃນບໍ່ດົນມານີ້ຂ້ອຍໄດ້ ກຳ ນົດຫາວິທີທີ່ດີກວ່າທີ່ຈະເຂົ້າໃຈ ສະແດງ ຄຸນສົມບັດ.
ມັນຫັນອອກພື້ນຖານຂອງ ສະແດງ ແມ່ນງ່າຍດາຍຫຼາຍກ່ວາຂ້າພະເຈົ້າຄິດວ່າໃນເບື້ອງຕົ້ນ. ໃນຄວາມເປັນຈິງ, ພວກເຂົາໃຊ້ຫຼັກການດຽວກັນກັບການຫຸ້ມຫໍ່ກະເປົາ. ຂ້ອຍຈະປົກປິດ ສະແດງ: ຕັນ, inline-block ແລະ ເສັ້ນ. ຖ້າທ່ານໄດ້ກະກຽມກະເປົາໃນແບບທີ່ເປັນລະບຽບຮຽບຮ້ອຍກ່ອນ, ທ່ານຈະເຫັນຂະຫນານ. ຖ້າເຈົ້າເປັນຄົນທີ່ຫຍິບເສື້ອຜ້າຂອງເຈົ້າທຸກຮູບແບບໃນແບບທີ່ບໍ່ດີ - ດີ, ມີພຽງແຕ່ຂ້ອຍເທົ່ານັ້ນທີ່ຂ້ອຍສາມາດເຮັດໄດ້ ສຳ ລັບເຈົ້າ.
ກະເປົາຂອງພວກເຮົາຈະມີເຄື່ອງນຸ່ງ 3 ປະເພດຄື:
- ອາຫານແຊບ, ຄືເສື້ອຍືດ
- ເສື້ອຍືດທີ່ສາມາດລອກໄດ້
- ຖົງຕີນຫລືຊຸດຊັ້ນໃນທີ່ສາມາດໃສ່ເປັນຊ່ອງຫວ່າງ
ສຳ ລັບການອ້າງອີງ, ຖ້າພວກເຮົາເອົາແບບຢ່າງຂອງກະເປົາໃສ່ໃນ HTML, ມັນຈະມີລັກສະນະດັ່ງນີ້:
div class = 'ກະເປົາ'> div class = 'ລະອຽດ'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> / div>
ບັນດາລາຍການທີ່ລະອຽດອ່ອນຢູ່ດ້ານເທິງ
ຈໍສະແດງຜົນ: block ແມ່ນຄ່າເລີ່ມຕົ້ນຂອງສ່ວນປະກອບ HTML ສ່ວນໃຫຍ່. ນັ້ນ ໝາຍ ຄວາມວ່າອົງປະກອບດັ່ງກ່າວຄອບຄອງພື້ນທີ່ແນວນອນທັງ ໝົດ ພາຍໃນພາຊະນະຂອງມັນ div. ຖ້າມັນຢູ່ຕິດກັບອົງປະກອບຂອງອ້າຍເອື້ອຍນ້ອງອື່ນໆ, ມັນຈະເລີ່ມຕົ້ນເສັ້ນ ໃໝ່, ແລະບໍ່ອະນຸຍາດໃຫ້ມີອົງປະກອບອື່ນໆໃນສາຍຂອງມັນ. ມັນຄ້າຍຄືກັບສິນຄ້າທີ່ລະອຽດອ່ອນທີ່ທ່ານໃສ່ຢູ່ເທິງສຸດຂອງກະເປົາຂອງທ່ານ. ເຫຼົ່ານີ້ແມ່ນບົດຄວາມທີ່ລະອຽດອ່ອນຫຼືສະຫຼາດເຊັ່ນ: ເສື້ອຍືດ. ທ່ານບໍ່ຕ້ອງການໃຫ້ພວກເຂົາຫົດຫູ່, ດັ່ງນັ້ນທ່ານຕ້ອງຮັບປະກັນວ່າພວກມັນບໍ່ໄດ້ຖືກຕ້ານກັບເສື້ອຜ້າອື່ນໆ.
ນີ້ ນຳ ເອົາພາກສ່ວນ ໜຶ່ງ ທີ່ເຄັ່ງຄັດທີ່ສຸດຂອງ ສະແດງ: ຕັນ. ສັງເກດວິທີທີ່ເສື້ອຍືດບໍ່ມີຄວາມກວ້າງທັງ ໝົດ ຂອງກະເປົາ? ນັ້ນບໍ່ໄດ້ ໝາຍ ຄວາມວ່າລາຍການອື່ນໆຈະກະໂດດຂຶ້ນຮອດລະດັບຂອງມັນ. ບອກວ່າເສື້ອນີ້ມີ 60 ເປີເຊັນຂອງຄວາມກວ້າງຂອງກະເປົາ; ມັນຍັງຈະຕັນສ່ວນປະກອບອື່ນໆຈາກການເຂົ້າຮ່ວມໃນລະດັບສູງສຸດ.
ນັ້ນແມ່ນເຫດຜົນທີ່ວ່າມີຊາຍແດນສີສົ້ມຢູ່ໃນຮູບ. ກ ສະແດງ: ຕັນ ອົງປະກອບອັດຕະໂນມັດຈະເພີ່ມຂອບຂອບຂອງມັນໂດຍອັດຕະໂນມັດຖ້າມັນບໍ່ຄອບຄອງພື້ນທີ່ນອນທັງ ໝົດ.
ເສື້ອຍືດໃສ່ເສື້ອຍືດທີ່ບໍ່ຕ້ອງການ
ກະເປົາຂອງທ່ານສ່ວນຫຼາຍແມ່ນເຄື່ອງນຸ່ງຂອງທ່ານທີ່ເຫລືອຢູ່ ສຳ ລັບການເດີນທາງຂອງທ່ານ. ເພື່ອຄວາມລຽບງ່າຍ, ພວກເຮົາ ກຳ ລັງຈະຕັດສິ່ງນີ້ໃຫ້ພຽງແຕ່ເສື້ອຍືດ. ມີການໂຕ້ວາທີທີ່ໃຫຍ່ໃນອິນເຕີເນັດວ່າການພັບຫລືມ້ວນແມ່ນມີປະສິດທິພາບຫຼາຍຂື້ນ. ຂ້ອຍເປັນຄົນທີ່ພັບໄດ້.
ເຖິງຢ່າງໃດກໍ່ຕາມ, ເພື່ອໃຫ້ ເໝາະ ກັບບັນດາສິນຄ້າຫຼາຍທີ່ສຸດ, ທ່ານວາງເສື້ອຍືດຂອງທ່ານໄວ້ທາງຂ້າງ. ນີ້ແມ່ນສິ່ງທີ່ແນ່ນອນ ສະແດງ: inline-block ແມ່ນຫມາຍຄວາມວ່າສໍາລັບການ. ອົງປະກອບເຫຼົ່ານີ້ສາມາດນັ່ງຢູ່ຂ້າງກັນແລະກັນຢູ່ແຖວດຽວກັນ, ພ້ອມທັງຢູ່ຕິດກັນ ສະແດງ: ເສັ້ນ ອົງປະກອບ.
ບໍ່ມັກ ສະແດງ: ເສັ້ນ ອົງປະກອບ, ເປັນ inline-block ອົງປະກອບຈະຍ້າຍໄປແຖວຕໍ່ໄປຖ້າມັນບໍ່ ເໝາະ ສົມກັບມັນ div ຄຽງຂ້າງອື່ນໆ inline-block ອົງປະກອບ. ເພື່ອໃຫ້ມີເສື້ອຍືດໃສ່ເສື້ອຢືດໃສ່ແຖວຕໍ່ໄປ, ທ່ານ ຈຳ ເປັນຕ້ອງຕັດເຄິ່ງ ໜຶ່ງ ແລະໃຊ້ເຄິ່ງທີ່ເຫຼືອເພື່ອເລີ່ມແຖວ ໃໝ່. Inline-block ອົງປະກອບບໍ່ໄດ້ຖືກອະນຸຍາດໃຫ້ແບ່ງປັນເປັນເຄິ່ງຖ້າພວກມັນບໍ່ ເໝາະ ສົມກັບເສັ້ນ.
ຖົງຕີນທີ່ເຕັມໄປໃນຊ່ອງຫວ່າງ
ກວດເບິ່ງກັບ HTML ເດີມແລະທ່ານຈະສັງເກດວ່າມີຖົງຕີນ ໜຶ່ງ div> ລະຫວ່າງເສື້ອຍືດແປດ. ແຕ່ເບິ່ງທີ່ມຸມມອງຕາມແນວນອນຂອງກະເປົາທີ່ຢູ່ເບື້ອງຂວາ. ຖ້າມີຖົງຕີນ ໜຶ່ງ div>, ມັນສາມາດສິ້ນສຸດແຖວກາງແລະເລີ່ມຕົ້ນແຖວລຸ່ມໄດ້ແນວໃດ? ນີ້ແມ່ນຈຸດປະສົງຂອງ ສະແດງ: ເສັ້ນ!
ເປັນ ເສັ້ນ ອົງປະກອບຈະຮົ່ວໄຫລໄປຫາເສັ້ນຕໍ່ໄປຖ້າມັນເກີນຄວາມກວ້າງຂອງແຜ່ນ div (ໃນທາງນີ້ມັນແຕກຕ່າງຈາກ inline-block ຫຼື ຕັນ). ນັບຕັ້ງແຕ່ຖົງຕີນຂອງພວກເຮົາ div ແມ່ນຖົງຕີນທີ່ເຕັມໄປດ້ວຍຖົງຕີນທີ່ບໍ່ຖືກຕ້ອງ, ມັນສາມາດເລີ່ມຕົ້ນຕື່ມຊ່ອງຫວ່າງຢູ່ເບື້ອງຂວາຂອງແຖວກາງແລະຮົ່ວໄຫລເພື່ອເລີ່ມແຖວ.
ບໍ່ ຈຳ ເປັນຕ້ອງໃສ່ຖົງຕີນໃນເຄິ່ງ ໜຶ່ງ ເພື່ອໃຫ້ສິ່ງນີ້ເກີດຂື້ນ. ນີ້ແມ່ນເຫດຜົນທີ່ພວກເຂົາສາມາດກາຍເປັນ ເສັ້ນ, ໃນຂະນະທີ່ເສື້ອຍືດສາມາດເປັນໄດ້ inline-block. ຖ້າເສື້ອຍືດຢູ່ແຖວກາງມີພຽງແຕ່ 60 ເປີເຊັນຂອງຄວາມກວ້າງ, ຖົງຕີນ div> ຈະຍ້າຍຂຶ້ນເພື່ອຕື່ມຂໍ້ມູນໃສ່ພື້ນທີ່ທັງຫມົດໃນສ່ວນທີ່ເຫຼືອຂອງແຖວ.
ເດີນທາງໂດຍສະຫວັດດີພາບ
ນີ້ແມ່ນ CSS ສຸດທ້າຍ ສຳ ລັບກະເປົາຂອງພວກເຮົາ:
.delicate {ສະແດງ: ບັອກ; ຄວາມກວ້າງ: 60%; } .tshirt {ສະແດງ: inline-block; ຄວາມກວ້າງ: 20%; } .socks {ສະແດງ: ໃນເສັ້ນ; }
ນີ້ແມ່ນສະຖານະການທາງເລືອກຄູ່ເພື່ອສະແດງໃຫ້ເຫັນເຖິງການ ນຳ ໃຊ້ທີ່ແຕກຕ່າງກັນຂອງການສະແດງ. ຖ້າຫາກວ່າອາຫານໂປດປານຢູ່ເທິງສຸດໄດ້ ສະແດງ: inline-block, ພວກເຂົາຈະ ເໝາະ ສົມກັບເສື້ອຍືດ. ເສື້ອຍືດ ຈຳ ນວນ ໜຶ່ງ ຈະເລື່ອນຂື້ນໄປທາງເທິງ, ສ່ວນທີ່ເຫຼືອກໍ່ຈະປັບຕົວຕາມຄວາມ ເໝາະ ສົມ. ມັນຈະບໍ່ມີສຽງປ້ອງກັນຢູ່ທາງຊ້າຍແລະຂວາຂອງເສື້ອຄໍເສື້ອ.
ຖ້າເສື້ອຍືດແຕ່ລະຄົນມີ display-block, ທ່ານຈະມີເສື້ອຍືດໃຫຍ່ໆຢູ່ທາງເທິງຂອງກັນແລະກັນ, ຕໍ່ ໜຶ່ງ ເສັ້ນ. ຖ້າຖົງຕີນມີ ສະແດງ: inline-block, ພວກເຂົາທຸກຄົນຈະນັ່ງຢູ່ແຖວລຸ່ມກ່ວາໄຫລຢູ່ລະຫວ່າງສອງແຖວ. ເສື້ອຍືດ ຈຳ ນວນ ໜຶ່ງ ຈະຖືກຍູ້ໃສ່ແຖວອື່ນ, ສ້າງເປັນແຖວທີສີ່. ມັນຈະມີຊ່ອງຫວ່າງຢູ່ເບື້ອງຂວາຂອງກາງເສື້ອທີເຊີດ.
ດ້ວຍວິທີການທີ່ຂ້າພະເຈົ້າໄດ້ກ່າວມານີ້, ພວກເຮົາສິ້ນສຸດດ້ວຍກະເປົາທີ່ເຕັມໄປດ້ວຍເຄື່ອງນຸ່ງທີ່ມີປະໂຫຍດສູງສຸດໃນການ ນຳ ໃຊ້ພື້ນທີ່ທີ່ມີ.
ບົດຂຽນນີ້ສະແດງອອກໃນເບື້ອງຕົ້ນ ວາລະສານສຸດທິ ສະບັບທີ 289; ຊື້ມັນຢູ່ທີ່ນີ້!
