不同宽度的CSS列

Question

我正在使用CSS Columns,例如:

HTML:

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

    </div>
</div>

CSS:

.content {
    column-count: 2;
}

但是我想在使用时让我的列具有不同的宽度column-width.

这有可能吗？我想也没办法使用百分比？

Answer 1

使用CSS列设置不同的列宽没有正确的方法.

为什么它不起作用

column-width物业只有物种的最佳宽度.最终输出将根据可用的父宽度进行拉伸或缩小.因此,当您需要固定或不同的列宽时,它不是正确的属性.例如:

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

100px宽的元件内部有两个40px宽的柱子.为了填充可用空间,实际列宽将增加到50px.

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

可用空间小于指定的列宽,因此实际的列宽将减小.

拧

如果您有2列,则可以设置-ve margin-right以获得不同的列宽.这适用于超过2列,但仅限于2个宽度.

可行的解决方案

您可以使用tables或display:table代替获得类似的结果.