有没有办法为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> 

有没有办法让一列20像素的宽度和一列的，比如说宽度，80px？

Answer 1

不，没有办法。

该功能是为在等列之间流动的内容而设计的。

Answer 2

从技术上说，只有multi-column property才能做到这一点，但对于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>

See JSFiddle Demo