ກົດລະບຽບແນວຕັ້ງ

ໃຊ້ຕົວຊ່ວຍກົດລະບຽບແນວຕັ້ງແບບກຳນົດເອງເພື່ອສ້າງຕົວແບ່ງແນວຕັ້ງຄືກັບ <hr>ອົງປະກອບ.

ໃນໜ້ານີ້

ມັນເຮັດວຽກແນວໃດ

ກົດລະບຽບແນວຕັ້ງໄດ້ຮັບການດົນໃຈຈາກ <hr>ອົງປະກອບ, ຊ່ວຍໃຫ້ທ່ານສາມາດສ້າງຕົວແບ່ງແນວຕັ້ງໃນຮູບແບບທົ່ວໄປ. ພວກມັນຖືກຈັດຮູບແບບຄືກັນກັບ <hr>ອົງປະກອບ:

ພວກເຂົາ 1pxກວ້າງ
ພວກເຂົາເຈົ້າ min-heightມີ1em
ສີຂອງພວກເຂົາແມ່ນຖືກກໍານົດໂດຍຜ່ານ currentColorແລະopacity

ປັບແຕ່ງພວກມັນດ້ວຍຮູບແບບເພີ່ມເຕີມຕາມຄວາມຕ້ອງການ.

ຕົວຢ່າງ

html

<div class="vr"></div>

ກົດລະບຽບແນວຕັ້ງຈະຂະຫຍາຍຄວາມສູງຂອງພວກມັນໃນຮູບແບບ flex:

html

<div class="d-flex" style="height: 200px;">
  <div class="vr"></div>
</div>

ມີ stacks

ພວກເຂົາເຈົ້າຍັງສາມາດຖືກນໍາໃຊ້ໃນ stacks :

ລາຍການທໍາອິດ

ລາຍການທີສອງ

ລາຍການທີສາມ

html

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border ms-auto">Second item</div>
  <div class="vr"></div>
  <div class="bg-light border">Third item</div>
</div>