ലംബ ഭരണം

<hr>എലമെന്റ് പോലെയുള്ള വെർട്ടിക്കൽ ഡിവൈഡറുകൾ സൃഷ്ടിക്കാൻ ഇഷ്‌ടാനുസൃത ലംബ റൂൾ ഹെൽപ്പർ ഉപയോഗിക്കുക .

ഈ പേജിൽ

ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു

ലംബ നിയമങ്ങൾ <hr>മൂലകത്തിൽ നിന്ന് പ്രചോദനം ഉൾക്കൊണ്ട്, പൊതുവായ ലേഔട്ടുകളിൽ ലംബമായ ഡിവൈഡറുകൾ സൃഷ്ടിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു. <hr>ഘടകങ്ങൾ പോലെയാണ് അവ രൂപകൽപ്പന ചെയ്തിരിക്കുന്നത് :

അവ 1pxവിശാലമാണ്
അവർക്കുണ്ട് min-height_1em
അവയുടെ നിറം സജ്ജീകരിച്ചിരിക്കുന്നു currentColorകൂടാതെopacity

ആവശ്യാനുസരണം അധിക ശൈലികൾ ഉപയോഗിച്ച് അവയെ ഇഷ്ടാനുസൃതമാക്കുക.

ഉദാഹരണം

html

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

ഫ്ലെക്സ് ലേഔട്ടുകളിൽ ലംബ നിയമങ്ങൾ അവയുടെ ഉയരം അളക്കുന്നു:

html

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

സ്റ്റാക്കുകൾ ഉപയോഗിച്ച്

അവ സ്റ്റാക്കുകളിലും ഉപയോഗിക്കാം :

ആദ്യ ഇനം

രണ്ടാമത്തെ ഇനം

മൂന്നാമത്തെ ഇനം

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>