不同宽度CSS列

Question

我使用CSS列，如：

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

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

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

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

调整

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

可行解

您可以使用tables或display:table替代来实现类似的效果。