不同寬度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替代來實現類似的效果。