Столбцы CSS разной ширины [дубликаты]

Я использую столбцы CSS, например:

HTML:

<div class="foo">
    <div class="content">

    </div>
</div>

CSS:

.content {
    column-count: 2;
}

Однако я хочу, чтобы мои столбцы имели разную ширину при использовании column-width.

Это вообще возможно? Я думаю, что нет никакого способа использовать проценты?


css css-multicolumn-layout
person Brett    schedule 24.11.2015    source источник
comment
Ссылка, приведенная в приведенном выше комментарии, говорит сама за себя (нет, у вас не может быть разных размеров для столбцов CSS3), но я хотел бы предложить вам использовать <table></table>   -  person Ankush    schedule 24.11.2015
comment
Или display: table вместо этого.   -  person wintercounter    schedule 24.11.2015
comment
Я не могу использовать таблицы, так как содержимое является динамическим и должно охватывать несколько столбцов, т.е. Я не могу разбить содержимое. Но, увы, мне пришлось придумать другой способ разделения контента, чтобы вместо этого я мог вернуть его в виде двух частей.   -  person Brett    schedule 24.11.2015

Ответы (1)


arrow_upward
5
arrow_downward

НЕТ ПРАВИЛЬНОГО способа установить разную ширину столбцов с помощью столбцов CSS.

Почему это не работает

column-width определяет только оптимальную ширину. Конечный результат будет растянут или сжат в зависимости от доступной ширины родительского элемента. Так что это свойство не подходит для использования, когда вам нужна фиксированная или разная ширина столбца. Бывший:

div {
  width: 100px;
  column-width: 40px;
}

Внутри элемента шириной 100 пикселей есть место для двух столбцов шириной 40 пикселей. Чтобы заполнить доступное пространство, фактическая ширина столбца будет увеличена до 50 пикселей.

div {
  width: 40px;
  column-width: 45px;
}

Доступное пространство меньше указанной ширины столбца, поэтому фактическая ширина столбца будет уменьшена.

Настроить

Если у вас есть 2 столбца, вы можете установить -ve margin-right, чтобы получить столбцы разной ширины. Это работает с более чем двумя столбцами, но ограничено только двумя ширинами.

Возможное решение

Вместо этого вы можете использовать tables или display:table для достижения аналогичных результатов.

person Aravind Bharathy    schedule 24.11.2015