Vɛtikal lɔ we de na di wɔl

Yuz di kɔstɔm vertikal rul ɛlda fɔ mek vertikal divayda dɛn lɛk di <hr>ɛlimɛnt.

Na dis pej

Aw i de wok

Vɛtikal lɔ dɛn na di <hr>ɛlimɛnt inspɛkt, we de alaw yu fɔ mek vertikal divayda dɛn na kɔmɔn layout dɛn. Dɛn stayl jɔs lɛk <hr>ɛlimɛnt dɛn:

Dɛn dɔn 1pxwayd
Dem get min-heightof1em
Dɛn kala de sɛt via currentColorɛnopacity

Kastamayz dɛn wit ɔda stayl dɛn as nid de.

Ɛgzampul

html

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

Vɛtikal lɔ dɛn skel dɛn ayt insay fleks layout dɛn:

html

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

Wit stak dɛn

Dɛn kin yuz dɛn bak na stak dɛn :

Fɔs tin we dɛn de tɔk bɔt

Sɛkɔn tin

Tɔd tin we de na di tɔd

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>