ວິທີການເລື່ອນຮູບພາບໄປທາງຊ້າຍຂອງຂໍ້ຄວາມໃນເວັບເພດ

ການໃຊ້ CSS ເພື່ອຈັດຮູບພາບໄປທາງດ້ານຊ້າຍຂອງຮູບແບບເວັບໄຊທ໌

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

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

ມີຮູບພາບທີ່ສອດຄ່ອງກັບເບື້ອງຊ້າຍຂອງຫນ້າຫນຶ່ງໃນຂະນະທີ່ ຂໍ້ຄວາມຂອງຫນ້ານັ້ນໄຫລໄປທົ່ວມັນ ເປັນການອອກແບບທົ່ວໄປສໍາລັບການອອກແບບແລະສໍາລັບຫນ້າເວັບຕ່າງໆ. ໃນເງື່ອນໄຂເວັບໄຊຕ໌, ຜົນກະທົບນີ້ແມ່ນເອີ້ນວ່າ floating ຮູບພາບ . ແບບນີ້ແມ່ນບັນລຸໄດ້ດ້ວຍ ຄຸນສົມບັດ CSS ສໍາລັບ "float". ຊັບສິນນີ້ອະນຸຍາດໃຫ້ຂໍ້ຄວາມທີ່ໄຫຼປະມານຮູບພາບຊ້າຍ - ໄປຫາທາງຂວາຂອງມັນ. (ຫຼືປະມານຮູບພາບທີ່ຖືກຕ້ອງສອດຄ່ອງກັບເບື້ອງຊ້າຍຂອງມັນ.) ເຮົາຈະເບິ່ງວິທີການບັນລຸຜົນສໍາເລັດນີ້.

ເລີ່ມຕົ້ນດ້ວຍ HTML

ສິ່ງທໍາອິດທີ່ທ່ານຈະຕ້ອງເຮັດແມ່ນມີບາງ HTML ທີ່ຈະເຮັດວຽກຮ່ວມກັບ. ສໍາລັບຕົວຢ່າງຂອງພວກເຮົາ, ພວກເຮົາຈະຂຽນວັກຂອງຂໍ້ຄວາມແລະເພີ່ມຮູບພາບຢູ່ໃນຕອນເລີ່ມຕົ້ນຂອງວັກ (ກ່ອນທີ່ຂໍ້ຄວາມ, ແຕ່ຫຼັງຈາກເປີດ

tag). ນີ້ແມ່ນສິ່ງທີ່ HTML markup ຄ້າຍຄື:

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

ໂດຍຄ່າເລີ່ມຕົ້ນ, ເວັບໄຊທ໌ຂອງພວກເຮົາຈະສະແດງດ້ວຍຮູບຂ້າງເທິງຂໍ້ຄວາມ. ນີ້ແມ່ນຍ້ອນວ່າຮູບພາບແມ່ນອົງປະກອບລະດັບຕັນໃນ HTML. ນີ້ຫມາຍຄວາມວ່າຕົວທ່ອງເວັບຈະສະແດງລາຍການສາຍກ່ອນແລະຫຼັງຈາກອົງປະກອບຮູບພາບໂດຍຄ່າເລີ່ມຕົ້ນ. ພວກເຮົາຈະປ່ຽນຮູບລັກສະນະແບບນີ້ໂດຍປ່ຽນເປັນ CSS. ຫນ້າທໍາອິດ, ຢ່າງໃດກໍຕາມ, ພວກເຮົາຈະເພີ່ມ ມູນຄ່າຫ້ອງຮຽນໃຫ້ກັບຮູບພາບຂອງພວກເຮົາ . ຊັ້ນຮຽນນັ້ນຈະເຮັດຫນ້າທີ່ເປັນ "hook" ທີ່ພວກເຮົາຈະນໍາໃຊ້ໃນ CSS ຂອງພວກເຮົາໃນພາຍຫລັງ.

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

ໃຫ້ສັງເກດວ່າປະເພດຂອງ "ຊ້າຍ" ນີ້ບໍ່ມີຫຍັງຢູ່ໃນຕົວຂອງມັນເອງ! ສໍາລັບພວກເຮົາທີ່ຈະບັນລຸແບບທີ່ຕ້ອງການຂອງພວກເຮົາ, ພວກເຮົາຈໍາເປັນຕ້ອງໃຊ້ CSS ຕໍ່ໄປ.

CSS Styles

ກັບ HTML ຂອງພວກເຮົາໃນສະຖານທີ່, ລວມທັງຄຸນລັກສະນະຂອງພວກເຮົາຂອງ "left", ພວກເຮົາໃນປັດຈຸບັນສາມາດຫັນກັບ CSS. ພວກເຮົາຈະເພີ່ມກົດລະບຽບຂອງ ຄໍເຕົ້າໄຂ່ ທີ່ຂອງພວກເຮົາທີ່ຈະເລື່ອນຮູບພາບນັ້ນແລະຕື່ມການໃສ່ແຜ່ນພຽງເລັກນ້ອຍຕໍ່ໄປເພື່ອວ່າຂໍ້ຄວາມທີ່ສຸດທ້າຍຈະລວບລວມຮູບບໍ່ຕິດກັບມັນຢ່າງໃກ້ຊິດ. ນີ້ແມ່ນ CSS ທີ່ທ່ານອາດຈະຂຽນ:

left {float: left padding: 0 20px 20px 0 }

ຮູບແບບນີ້ floats ຮູບພາບທີ່ຢູ່ເບື້ອງຊ້າຍແລະເພີ່ມຂື້ນພຽງເລັກນ້ອຍ (ໃຊ້ CSS ບາງຕົວອັກສອນ) ໄປທາງຂວາແລະດ້ານລຸ່ມຂອງຮູບ.

ຖ້າທ່ານໄດ້ທົບທວນຫນ້າທີ່ມີ HTML ນີ້ໃນຕົວທ່ອງເວັບ, ຮູບພາບຈະສອດຄ່ອງກັບຊ້າຍແລະຂໍ້ຄວາມຂອງວັກຈະປາກົດຢູ່ກັບມັນດ້ວຍຈໍານວນທີ່ເຫມາະສົມຂອງຊ່ອງຫວ່າງລະຫວ່າງສອງ. ຫມາຍເຫດມູນຄ່າຂອງຫ້ອງຮຽນຂອງ "ຊ້າຍ" ທີ່ພວກເຮົາໃຊ້ແມ່ນຄວາມມັກ. ພວກເຮົາສາມາດເອີ້ນວ່າສິ່ງໃດກໍ່ຕາມເພາະຄໍາວ່າ "ປະໄວ້" ບໍ່ມີຫຍັງເລີຍ. ນີ້ຕ້ອງມີ ຄຸນສົມບັດຊັ້ນໃນ HTML ທີ່ເຮັດວຽກກັບ CSS ແບບຈິງໆທີ່ກໍານົດການປ່ຽນແປງທີ່ທ່ານກໍາລັງຊອກຫາ.

ວິທີທາງເລືອກເພື່ອບັນລຸຮູບແບບເຫຼົ່ານີ້

ວິທີການຂອງການໃຫ້ຮູບພາບຂອງອົງປະກອບຮູບພາບນີ້ເປັນລັກສະນະຂອງຊັ້ນແລະຫຼັງຈາກນັ້ນໃຊ້ແບບ CSS ທົ່ວໄປທີ່ floats ອົງປະກອບແມ່ນພຽງແຕ່ຫນຶ່ງທາງທີ່ທ່ານສາມາດເຮັດສໍາເລັດນີ້ເບິ່ງຮູບພາບ "ຊ້າຍ". ນອກນັ້ນທ່ານຍັງສາມາດເອົາມູນຄ່າຫ້ອງຮຽນອອກຈາກຮູບພາບແລະສະໄຕມັນດ້ວຍ CSS ໂດຍການຂຽນຕົວເລືອກສະເພາະຫຼາຍຂຶ້ນ. ຕົວຢ່າງ, ໃຫ້ເບິ່ງຕົວຢ່າງທີ່ພາບນັ້ນຢູ່ໃນສ່ວນທີ່ມີຄ່າຂອງຊັ້ນຂອງ "ເນື້ອຫາຫລັກ".