Я использую CSS столбцы, например:Различные столбцы ширина CSS
HTML:
<div class="foo">
<div class="content">
</div>
</div>
CSS:
.content {
column-count: 2;
}
Однако я хочу, чтобы мои столбцы разные ширина при использовании column-width.
Возможно ли это вообще? Наверное, нет способа использовать проценты?
НЕТ ПРАВИЛЬНОГО способа установить разные ширины столбцов с помощью столбцов CSS.
Почему он не будет работать
column-width свойства только видовых оптимальная шириной. Конечный результат будет растянут или сжат на основе доступной ширины родителя. Таким образом, это не правильная собственность для использования, когда вам нужны фиксированные или разные ширины столбцов. Ex:
div {
width: 100px;
column-width: 40px;
}
Существует комната для двух 40px широких колонн внутри широкого элемента 100px. Чтобы заполнить доступное пространство, фактическая ширина столбца будет увеличена до 50 пикселей.
div {
width: 40px;
column-width: 45px;
}
Доступное пространство меньше указанной ширины столбца, поэтому фактическая ширина столбца будет уменьшена.
Tweak
В случае, если у вас есть 2 колонки, вы можете установить -ve margin-right получить различную ширину столбцов. Это работает с более чем двумя столбцами, но ограничено только двумя ширинами.
реализуемое решение
Вы можете использовать tables или display:table вместо того, чтобы достичь подобных результатов.
Ссылка, содержащаяся в приведенном выше комментарии, говорит все (нет, вы не можете иметь разные размеры для столбцов CSS3), но я хотел бы предложить вам использовать '
Или 'display: table' вместо этого. – wintercounter
Я не могу использовать таблицы, поскольку содержимое является динамическим, и оно должно охватывать несколько столбцов - т.е. Я не могу сломать контент. Но, увы, мне пришлось придумать другой способ отделить контент, чтобы я мог вернуть его как две части. – Brett