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;
}

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

<强> TWEAK

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

可行的解决方案

您可以使用tables或display:table来取得类似效果。