有没有办法为CSS3中的列指定不同的宽度？

Question

我想使用CSS来呈现两列布局.我正在使用的标记就是这个

<div style="-webkit-column-count: 2;
            -webkit-column-rule: 1px solid black;
            -webkit-column-width: 80px;
             margin-left:20px;margin-top:20px;">
    <div id="picturebox" style="">picture box</div>
    <div id="nme">name</div>
</div>

有没有办法让一列宽度为20px,一列宽度为80px？

Answer 1

不,没有办法.

该功能专为在相等列之间流动的内容而设计.

Answer 2

从技术上讲,仅使用多列属性是不可能的,但对于2列布局,您可以通过margin在其中一侧设置负数来实现此目的.

div {
    width: 400px;
    background-color: lightgreen;
}

ul {
    -moz-columns: 2 auto;
    -webkit-columns: 2 auto;
    columns: 2 auto;
    -moz-column-gap: 80px;
    -webkit-column-gap: 80px;
    column-gap: 80px;
    margin-right: -80px;
}

<div>
    <ul>
        <li>Lorem Ipsum Lorem Ipsum</li>
        <li>Lorem Ipsum Lorem Ipsum</li>
        <li>Lorem Ipsum Lorem Ipsum</li>
        <li>Lorem Ipsum Lorem Ipsum</li>
        <li>Lorem Ipsum Lorem Ipsum</li>
        <li>Lorem</li>
        <li>Lorem</li>
        <li>Lorem</li>
        <li>Lorem</li>
    </ul>
</div>

参见JSFiddle演示