Свойство column-width

Свойство column-width кўп устунли матнда устунларнинг кенглигини белгилайди. Свойствонинг қиймати сифатида фоизлардан ташқари ⁅a href="/uzc/markup/manual/css/reference/units/sizes/"⁆ўлчов бирликлари⁅/a⁆ ёки auto (сузбосий) калит сузи хизмат қилади. auto қийматида браузер устунларнинг оптимал кенглигини column-count ва column-gap асосида ўзи аниклайди.

Синтаксис

cssселектор {
  column-width: қиймат;
}

Мисол . Кўрсатилган кенглик

Бу мисолда устуннинг кенглиги column-width 150px деб кўрсатилган, уларнинг сони column-count эса auto қийматида турибди. Натижада устунларнинг кенглиги 150px бўлади, уларнинг сони ва ўрталаридаги масофони браузер ўзи аниклайди:

html<div id="elem">
  some long text
</div>
css#elem {
  column-count: auto;
  column-width: 150px;
  text-align: justify;
}

Результат:

Мисол . Auto қиймати

Бу мисолда матн 3 устунга бўлинади (чунки column-width 3 қийматида турибди), аммо уларнинг кенглиги автоматик ҳисобланади:

html<div id="elem">
  some long text
</div>
css#elem {
  column-width: auto;
  column-count: 3;
  text-align: justify;
}

Результат:

Шунингдек қаранг

  • свойство column-count,
    устунлар сонини белгиловчи
  • свойство column-gap,
    устунлар ўртасидаги масофани белгиловчи
  • свойство column-rule,
    устунлар ўртасидаги чегарани белгиловчи
  • свойство column-span,
    элемент қанча устунга чўзилишини белгиловчи
  • свойство columns,
    кўп устунлилик учун қисқартирилган свойство