不同宽度 CSS 列

Different width CSS columns

我正在使用 CSS 列，例如：

HTML:

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

    </div>
</div>

CSS:

.content {
    column-count: 2;
}

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

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

没有正确的方法来设置 CSS 列的不同列宽。

为什么不行

column-width 属性 只选择最佳宽度。最终输出将根据可用的父宽度进行拉伸或收缩。所以当你需要固定或不同的列宽时使用它是不正确的属性。 例如：

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

100 像素宽的元素内有两个 40 像素宽的列的空间。为了填充可用的space实际列宽将增加到50px。

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

可用的space小于指定的列宽，实际列宽将因此减小。

调整

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

可行解

您可以使用 tables 或 display:table 来获得类似的结果。