ການນໍາໃຊ້ຊັບສິນ float CSS ອອກແບບອອກແບບເວັບໄຊຕ໌
ຊັບສິນ CSS ແມ່ນຊັບສິນທີ່ສໍາຄັນທີ່ສຸດສໍາລັບຮູບຮ່າງ. ມັນອະນຸຍາດໃຫ້ທ່ານວາງຕໍາແຫນ່ງຫນ້າເວັບຂອງທ່ານຢ່າງແນ່ນອນຕາມທີ່ທ່ານຕ້ອງການໃຫ້ສະແດງ - ແຕ່ເພື່ອໃຊ້ມັນທ່ານຕ້ອງເຂົ້າໃຈວ່າມັນເຮັດວຽກໄດ້ແນວໃດ.
ໃນເອກະສານແບບສະໄຕ, ຊັບສິນ float CSS ຄືກັບນີ້:
right {float: right }
ນີ້ບອກຕົວທ່ອງເວັບວ່າທຸກສິ່ງທຸກຢ່າງທີ່ມີຫ້ອງຮຽນ "ສິດ" ຄວນຖືກນໍາໄປສູ່ຂວາ.
ທ່ານຈະມອບຫມາຍມັນດັ່ງນີ້:
class = "right" />
ທ່ານສາມາດ float ກັບ Property Float Property?
ທ່ານບໍ່ສາມາດເລື່ອນທຸກສ່ວນໃນຫນ້າເວັບໄດ້. ທ່ານພຽງແຕ່ສາມາດເລື່ອນອົງປະກອບ ລະດັບຕັນ . ເຫຼົ່ານີ້ແມ່ນອົງປະກອບທີ່ໃຊ້ເວລາເຖິງຊ່ອງຫວ່າງໃນຫນ້າ, ເຊັ່ນ: ຮູບພາບ (), ວັກ (), ພະແນກ () ແລະລາຍການ ().
ອົງປະກອບອື່ນໆທີ່ມີຜົນກະທົບຕໍ່ບົດເລື່ອງ, ແຕ່ບໍ່ໄດ້ສ້າງກ່ອງຢູ່ໃນຫນ້າທີ່ຖືກເອີ້ນວ່າ ອົງປະກອບພາຍໃນ ແລະບໍ່ສາມາດລອຍຕົວໄດ້. ເຫຼົ່ານີ້ແມ່ນອົງປະກອບເຊັ່ນ: span (), break lines (), ເນັ້ນຫນັກເຂັ້ມແຂງ (), ຫຼື italics ().
ບ່ອນໃດພວກເຂົາເຈົ້າເລື່ອນ?
ທ່ານສາມາດເລື່ອນອົງປະກອບໃຫ້ທາງຂວາຫຼືຊ້າຍ. ອົງປະກອບໃດຫນຶ່ງທີ່ປະຕິບັດຕາມອົງປະກອບທີ່ເລື່ອນລອຍຈະໄຫລປະມານອົງປະກອບທີ່ລອຍຢູ່ໃນອີກດ້ານຫນຶ່ງ.
ຕົວຢ່າງເຊັ່ນຖ້າຂ້ອຍເລື່ອນຮູບພາບໄປທາງຊ້າຍ, ຂໍ້ຄວາມໃດຫນຶ່ງຫຼືອົງປະກອບອື່ນໆຕໍ່ໄປມັນຈະໄຫລອອກໄປຫາຂວາ. ແລະຖ້າຂ້ອຍເລື່ອນຮູບພາບໄປທາງຂວາ, ຂໍ້ຄວາມໃດຫນຶ່ງຫຼືອົງປະກອບອື່ນໆທີ່ຕິດຕາມມັນກໍ່ຈະໄຫລໄປທາງດ້ານຊ້າຍ. ຮູບພາບທີ່ຖືກຈັດໃສ່ໃນບລັອກຂໍ້ຄວາມໂດຍບໍ່ມີແບບເລື່ອນໃດໆທີ່ຖືກນໍາໃຊ້ກັບມັນຈະສະແດງຢ່າງໃດກໍ່ຕາມ, ຕົວທ່ອງເວັບແມ່ນກໍານົດໃຫ້ສະແດງພາບ.
ນີ້ແມ່ນປົກກະຕິແລ້ວກັບເສັ້ນທໍາອິດຂອງຂໍ້ຄວາມຕໍ່ໄປນີ້ສະແດງຢູ່ດ້ານລຸ່ມຂອງຮູບພາບ.
ພວກເຂົາຈະເລີນເຕີບໂຕໄດ້ແນວໃດ?
ອົງປະກອບທີ່ໄດ້ຮັບການ ລອຍຕົວ ຈະຍ້າຍໄປທາງຊ້າຍຫລືຂວາຂອງອົງປະກອບຂອງຖັງທີ່ມັນສາມາດເຮັດໄດ້. ນີ້ຜົນໃນສະຖານະການທີ່ແຕກຕ່າງກັນຫຼາຍຂຶ້ນຢູ່ກັບວິທີການຂຽນລະຫັດຂອງທ່ານ.
ສໍາລັບຕົວຢ່າງເຫຼົ່ານີ້, ຂ້ອຍຈະ floating ອົງປະກອບ DIV ຂະຫນາດນ້ອຍໄປທາງຊ້າຍ:
- ຖ້າອົງປະກອບທີ່ເລື່ອນບໍ່ມີຄວາມກວ້າງທີ່ກໍານົດໄວ້ກ່ອນ, ມັນຈະໃຊ້ເວລາພື້ນທີ່ນອນຕາມຈໍານວນທີ່ຈໍາເປັນແລະມີຢູ່, ໂດຍບໍ່ວ່າມັນຈະເລື່ອນໄດ້. ຫມາຍເຫດ: ຕົວທ່ອງເວັບບາງຄົນພະຍາຍາມຈັດເອົາອົງປະກອບຂ້າງອົງປະກອບທີ່ floated ເມື່ອ width ບໍ່ໄດ້ກໍານົດ - ໂດຍປົກກະຕິໃຫ້ອົງປະກອບທີ່ບໍ່ແມ່ນ float ພຽງແຕ່ຈໍານວນນ້ອຍໆຂອງພື້ນທີ່. ດັ່ງນັ້ນ, ທ່ານຄວນ ກໍານົດຄວາມກວ້າງຂອງ ອົງປະກອບທີ່ລອຍຕົວ.
- ຖ້າອົງປະກອບຂອງຕົວຖັງແມ່ນອົງປະກອບ HTML, ຕົວ DIV ທີ່ຖືກລອຍຢູ່ຈະຢູ່ໃນຂອບຂອບຂອງຫນ້າ.
- ຖ້າອົງປະກອບຂອງຖັງແມ່ນຕົວຂອງມັນເອງໂດຍມີສິ່ງອື່ນອີກ, DIV ທີ່ລອຍຕົວຈະນັ່ງຢູ່ຂອບຂອບທາງດ້ານຊ້າຍຂອງຖັງ.
- ທ່ານສາມາດຮວບຮວມອົງປະກອບ floated, ແລະທີ່ສາມາດເຮັດໃຫ້ float ສິ້ນສຸດລົງໃນບ່ອນທີ່ແປກໃຈໄດ້. ຕົວຢ່າງ, float ນີ້ແມ່ນຊ້າຍ float DIV ພາຍໃນຂວາ floated DIV.
- ອົງປະກອບທີ່ເລື່ອນລອຍຈະຢູ່ຕໍ່ໄປຖ້າຫາກວ່າມີຫ້ອງຢູ່ໃນຖັງ. ຕົວຢ່າງເຊັ່ນ, ຖັງນີ້ມີສາມອົງປະກອບ DIV ກວ້າງ 100px floated ຢູ່ໃນຖາດກວ້າງ 400px.
ທ່ານຍັງສາມາດນໍາໃຊ້ການລອຍຕົວເພື່ອສ້າງຮູບພາບແກັບຮູບພາບ. ທ່ານເອົາຮູບພາບແຕ່ລະຄົນ (ມັນເຮັດວຽກທີ່ດີທີ່ສຸດໃນຂະນະທີ່ພວກເຂົາທັງຫມົດມີຂະຫນາດດຽວກັນ) ໃນ DIV ດ້ວຍຫົວຂໍ້ແລະ floating ອົງປະກອບ DIV ໃນບ່ອນເກັບມ້ຽນ.
ບໍ່ວ່າມັນຈະກວ້າງໃນປ່ອງຢ້ຽມຂອງຕົວທ່ອງເວັບ, ຮູບພາບຂະຫນາດນ້ອຍຈະມີຮູບແບບຢ່າງເທົ່າທຽມກັນ.
ການປິດການເລື່ອນໄດ້
ເມື່ອໃດທີ່ທ່ານຮູ້ວິທີການໄດ້ຮັບອົງປະກອບທີ່ຈະເລື່ອນລົງ, ມັນເປັນສິ່ງສໍາຄັນທີ່ຈະຮູ້ວິທີການປິດທ່ອນໄມ້. ທ່ານປິດທ່ອນໄມ້ທີ່ມີຄຸນສົມບັດທີ່ຈະແຈ້ງ CSS. ທ່ານສາມາດລ້າງ floats ຊ້າຍ, floats ຂວາຫຼືທັງສອງ:
clear: left
clear: right
clear: both
ອົງປະກອບໃດຫນຶ່ງທີ່ທ່ານກໍານົດ ຄຸນສົມບັດທີ່ຈະແຈ້ງ ສໍາລັບການຈະປາກົດຢູ່ຂ້າງລຸ່ມນີ້ອົງປະກອບທີ່ຖືກ floated ທິດທາງນັ້ນ. ຕົວຢ່າງ, ໃນຕົວຢ່າງນີ້, ສອງວັກທໍາອິດຂອງຂໍ້ຄວາມບໍ່ໄດ້ຖືກລຶບລ້າງ, ແຕ່ທີສາມແມ່ນ.
ຫຼິ້ນກັບມູນຄ່າທີ່ຊັດເຈນຂອງອົງປະກອບຕ່າງໆໃນເອກະສານຂອງທ່ານເພື່ອໃຫ້ໄດ້ຜົນກະທົບຮູບຮ່າງແຕກຕ່າງກັນ.
ຫນຶ່ງໃນຮູບແບບທີ່ຫນ້າສົນໃຈທີ່ຫນ້າສົນໃຈຫຼາຍທີ່ສຸດແມ່ນຮູບພາບຕ່າງໆທີ່ຢູ່ໃນຄໍລໍາຂວາຫຼືຊ້າຍຕໍ່ໄປຫາວັກຂອງຂໍ້ຄວາມ. ເຖິງແມ່ນວ່າຂໍ້ຄວາມບໍ່ພຽງພໍທີ່ຈະເລື່ອນພາບຜ່ານມາ, ທ່ານສາມາດໃຊ້ຮູບພາບທີ່ຊັດເຈນໃນທຸກຮູບເພື່ອໃຫ້ແນ່ໃຈວ່າພວກມັນຈະປາກົດຢູ່ໃນຄໍລໍາແທນທີ່ຈະຢູ່ຂ້າງຫນ້າຮູບພາບກ່ອນຫນ້າ.
HTML (repeat paragraph ນີ້):
ທ່ານສາມາດປະຕິເສດຄວາມຜິດພາດຂອງຕົນເອງໃນເວລາທີ່ທ່ານໄດ້ຮັບການສະຫນັບສະຫນູນໃນການສະຫມັກໃຈ. Cupidatat ບໍ່ມີປະໂຫຍດ, ເຮັດວຽກແລະເຮັດວຽກດີ.
CSS (ເພື່ອເລື່ອນຮູບພາບໄປທາງຊ້າຍ):
imgfloat {float: left
clear: left
margin: 5px
}
ແລະໄປທາງຂວາ:
imgfloat {float: right
clear: right
margin: 5px
}
ໃຊ້ Floats ສໍາລັບການອອກແບບ
ເມື່ອທ່ານເຂົ້າໃຈວ່າຊັບສິນຂອງເລື່ອນເຮັດວຽກ, ທ່ານສາມາດເລີ່ມຕົ້ນໃຊ້ມັນເພື່ອຈັດວາງຫນ້າເວັບຂອງທ່ານ. ເຫຼົ່ານີ້ແມ່ນຂັ້ນຕອນທີ່ຂ້ອຍໃຊ້ເພື່ອສ້າງຫນ້າເວັບທີ່ floated:
- ອອກແບບຮູບແບບ (ເທິງເຈ້ຍຫຼືເຄື່ອງມືກາຟິກຫຼືຢູ່ໃນຫົວຂອງຂ້ອຍ).
- ກໍານົດບ່ອນທີ່ພະແນກຫນ້າຈະເປັນໄປໄດ້.
- ກໍານົດຄວາມກວ້າງຂອງບັນຈຸຕ່າງໆແລະອົງປະກອບພາຍໃນພວກເຂົາ.
- Float everything ເຖິງແມ່ນວ່າອົງປະກອບຂອງຖັງທີ່ຢູ່ນອກແມ່ນລອຍຢູ່ເບື້ອງຊ້າຍເພື່ອວ່າຂ້ອຍຮູ້ວ່າບ່ອນໃດທີ່ມັນຈະຢູ່ໃນສະຖານທີ່ທີ່ກ່ຽວກັບພອດ view ຂອງຕົວທ່ອງເວັບ.
ຂະນະທີ່ທ່ານຮູ້ວ່າ widths (percentages are fine) ຂອງສ່ວນຮູບແບບຂອງທ່ານ, ທ່ານສາມາດໃຊ້ຊັບສົມບັດທີ່ float ເພື່ອເຮັດໃຫ້ພວກເຂົາບ່ອນທີ່ພວກເຂົາຢູ່ໃນຫນ້າ. ແລະສິ່ງທີ່ດີຄື, ທ່ານບໍ່ຈໍາເປັນຕ້ອງກັງວົນກ່ຽວກັບຮູບແບບທີ່ແຕກຕ່າງກັນສໍາລັບ Internet Explorer ຫຼື Firefox.