Gibt es eine Möglichkeit, unterschiedliche Breiten für Spalten in CSS3 anzugeben?

Question

Ich möchte CSS verwenden, um ein zweispaltiges Layout darzustellen. Die Markup ich verwende ist die

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

Gibt es eine Möglichkeit eine Spalte eine Breite von 20px und eine Spalte mit einer Breite von etwa 80px zu geben?

Answer 1

Nein, es gibt keinen Weg.

Die Funktion ist für Inhalte vorgesehen, die zwischen gleichen Spalten fließen.

Answer 2

Technisch ist es nicht möglich, es mit der multi-column property nur zu tun, aber für ein 2-Spalten-Layout können Sie das erreichen, indem Sie eine negative margin auf einer der Seiten setzen.

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