Existe-t-il un moyen de spécifier des largeurs différentes pour les colonnes dans CSS3?

Question

Je voudrais utiliser CSS pour présenter une disposition à deux colonnes. Le balisage J'utilise est ce

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

Est-il possible de donner une colonne d'une largeur de 20px et une colonne d'une largeur de, disons, 80px?

Answer 1

Non, il n'y a pas moyen.

La fonctionnalité est conçue pour le contenu qui circule entre des colonnes égales.

Answer 2

Techniquement, il n'est pas possible de le faire avec le multi-column property uniquement, mais pour une disposition en 2 colonnes, vous pouvez le faire en définissant un margin négatif sur l'un des côtés.

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