Có cách nào để chỉ định độ rộng khác nhau cho các cột trong CSS3 không?

Question

Tôi muốn sử dụng CSS để trình bày bố cục hai cột. Đánh dấu tôi đang sử dụng là số này

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

Có cách nào để cung cấp cho một cột có chiều rộng 20px và một cột có chiều rộng là 80px không?

Answer 1

Không, không có cách nào.

Tính năng được thiết kế cho nội dung chảy giữa các cột bằng nhau.

Answer 2

Về mặt kỹ thuật, bạn không thể thực hiện điều này chỉ với multi-column property nhưng đối với bố cục 2 cột, bạn có thể thực hiện điều đó bằng cách đặt số âm margin ở một bên.

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