Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie kann ich in CSS3 Spalten mit unterschiedlichen Breiten erstellen?

DDD
Freigeben: 2024-10-30 07:39:28
Original
678 Leute haben es durchsucht

How Can I Create Columns with Different Widths in CSS3?

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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage