column-rule ගුණය

column-rule ගුණය බහු-තීරු ගතියක තීරු අතර මායිම නියම කරයි. ගනු ලබන අගයන් අනුව එය border ගුණයට සමාන වේ.

නිදර්ශනය . solid වර්ගය

මෙම නිදර්ශනයේ, ගතිය 3 තීරු වලට විභාජනය වනු ඇති අතර තීරු අතර මායිම 1px ඝනත්වයේ ඝන රේඛාවක් ලෙස පෙන්වනු ඇත (තීරු අතර දුර ස්වයංක්‍රීයව ගොඩනැගෙනු ඇත, මන්ද column-gap normal අගයෙන් නියම කර ඇත):

html<div id="elem">
  some long text
</div>
css#elem {
  column-rule: 1px solid black;
  column-count: 3;
  column-gap: normal;
  text-align: justify;
}

Результат:

නිදර්ශනය . column-gap හි බලපෑම

මෙම නිදර්ශනයේ, ගතිය 3 තීරු වලට විභාජනය වනු ඇති අතර ඒවා අතර දුර 50px වේ. මෙම අවකාශය මැදින් මායිම ගමන් කරනු ඇත (මායිමේ දකුණට සහ වමට 25px බැගින් වනු ඇත):

html<div id="elem">
  some long text
</div>
css#elem {
  column-rule: 1px solid black;
  column-count: 3;
  column-gap: 50px;
  text-align: justify;
}

Результат:

මෙයද බලන්න

  • column-width ගුණය,
    තීරුවක පළල නියම කරයි
  • column-count ගුණය,
    තීරු ගණන නියම කරයි
  • column-gap ගුණය,
    තීරු අතර අවකාශය නියම කරයි
  • column-span ගුණය,
    අංගයක් විහිදිය යුතු තීරු ගණන නියම කරයි
  • columns ගුණය,
    බහු-තීරුකත්වය සඳහා කෙටි ගුණයකි