不同宽度的CSS列[重复]

【问题标题】：Different width CSS columns [duplicate]不同宽度的CSS列[重复]
【发布时间】：2017-08-28 02:38:58
【问题描述】：

我正在使用 CSS Columns，例如：

HTML：

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

    </div>
</div>

CSS：

.content {
    column-count: 2;
}

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

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

【问题讨论】：

【解决方案1】：

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

为什么它不起作用

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

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

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

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

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

调整

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

可行的解决方案

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

【讨论】：