Wie kann ich in CSS3 Spalten mit unterschiedlichen Breiten erstellen?

Angeben verschiedener Spaltenbreiten in CSS3

Das mehrspaltige Layout von CSS3 bietet zwar eine bequeme Möglichkeit, mehrspaltige Layouts zu erstellen, dies ist jedoch nicht der Fall Ermöglichen Sie die Angabe verschiedener Spaltenbreiten.

Im bereitgestellten Beispiel, in dem ein zweispaltiges Layout gewünscht wird, wobei eine Spalte 20 Pixel breit und die andere 80 Pixel breit ist:

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

Dies ist nicht möglich. Die Eigenschaft -webkit-column-width legt die Breite aller Spalten gleich fest. Der Grund für diese Einschränkung liegt darin, dass die mehrspaltige Layoutfunktion für Inhalte konzipiert ist, die zwischen gleichen Spalten fließen und ein konsistentes und ausgewogenes Layout beibehalten.

Um den gewünschten Effekt zu erzielen, sind daher alternative Ansätze wie die Verwendung mehrerer Divs- oder Float-Techniken sind möglicherweise besser geeignet.

Das obige ist der detaillierte Inhalt vonWie kann ich in CSS3 Spalten mit unterschiedlichen Breiten erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!