¿Hay alguna forma de especificar diferentes anchuras para columnas en CSS3?

Question

Me gustaría usar CSS para presentar un diseño de dos columnas. El margen de beneficio que estoy usando es este

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

¿Hay una manera de darle una columna una anchura de 20 píxeles y una columna una anchura de, por ejemplo, 80px?

Answer 1

No, no hay forma.

La función está diseñada para contenido que fluye entre columnas iguales.

Answer 2

Técnicamente, no es posible hacerlo con el multi-column property, pero para un diseño de 2 columnas puede lograrlo estableciendo un margin negativo en uno de los lados.

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