Comment puis-je créer une mise en page à deux colonnes avec des largeurs inégales à l'aide de CSS3 ?

Création de mises en page multi-colonnes avec des largeurs inégales

En CSS3, la propriété column permet la création de mises en page multi-colonnes. Cependant, il offre un contrôle limité sur la largeur des colonnes individuelles.

Problème :

Vous souhaitez implémenter une disposition à deux colonnes avec des largeurs inégales, donnant à une colonne un une largeur de 20px et l'autre une largeur de 80px. Le balisage suivant est utilisé :

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

Réponse :

Malheureusement, il n'existe aucun moyen de spécifier différentes largeurs pour les colonnes en CSS3. La propriété column est conçue pour le contenu qui déborde entre des colonnes de même largeur. Par conséquent, vous ne pouvez pas obtenir les largeurs de colonnes inégales souhaitées à l'aide de cette fonctionnalité.

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!