css - 不同宽度的 CSS 列

Question

我正在使用 CSS 列，例如：

HTML：

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

    </div>
</div>

CSS：

.content {
    column-count: 2;
}

但是，我希望我的列在使用时具有不同的宽度column-width。

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

score 5 · Accepted Answer

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

为什么它不起作用

column-width属性仅种最佳宽度。最终输出将根据可用的父宽度进行拉伸或收缩。因此，当您需要固定或不同的列宽时，使用它不是正确的属性。前任：

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

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

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

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

调整

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

可行的解决方案

您可以使用tablesordisplay:table来实现类似的结果。

1 回答 1