Comment puis-je créer des colonnes avec différentes largeurs en CSS3 ?

Spécifier différentes largeurs de colonnes dans CSS3

Bien que la mise en page multi-colonnes de CSS3 offre un moyen pratique de créer des mises en page multi-colonnes, elle ne le fait pas permettre la spécification de différentes largeurs de colonnes.

Dans l'exemple fourni, où une disposition à deux colonnes est souhaitée avec une colonne de 20 px de large et l'autre de 80 px de large :

<code class="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></code>

C'est pas possible. La propriété -webkit-column-width définit la largeur de toutes les colonnes de manière égale. La raison de cette limitation est que la fonctionnalité de mise en page multi-colonnes est conçue pour le contenu qui circule entre des colonnes égales, en conservant une mise en page cohérente et équilibrée.

Par conséquent, pour obtenir l'effet souhaité, des approches alternatives telles que l'utilisation de plusieurs les techniques de divs ou de float peuvent être plus appropriées.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!