CSS bietet eine Stilbeschreibung für die HTML-Auszeichnungssprache und definiert, wie darin enthaltene Elemente angezeigt werden. CSS ist ein Durchbruch im Bereich Webdesign. Es kann verwendet werden, um einen kleinen Stil zu ändern, um alle damit verbundenen Seitenelemente zu aktualisieren. CSS hat uns immer Kopfschmerzen bereitet, das heißt, es ist mühsam, Layouts zu erstellen. Natürlich gibt es viele Möglichkeiten und Techniken, verschiedene Layouts zu erstellen, aber wir sind immer der Meinung, dass CSS einige neue Eigenschaften bereitstellen sollte, damit wir Layouts besser verwalten können. Glücklicherweise bietet CSS3 eine Reihe neuer Spaltenattribute zum Erstellen von Spaltenlayouts. Mit diesen Attributen müssen wir keine Float-, Clear-, Margin- und andere Attribute mehr zur Steuerung verwenden, was eine Menge Ärger vermeidet.
CSS-Code
Die Spaltenserienattribute in CSS3 bieten verschiedene Funktionen. Durch ihre Kombination können Sie jedes entsprechende Spaltenlayout erhalten:
Column-Count: Anzahl der columns
column-gap: Lückenbreite zwischen Spalten
column-width: Die empfohlene Breite darf nicht verwendet werden, der Browser berechnet basierend auf diesem Wert
column-rule- width: Die Breite der Trennlinie zwischen Spalten
column-rule-style: Der Stil der Trennlinie zwischen Spalten
column-rule-color: Demonstration der Trennlinie zwischen Spalten
column-span: ermöglicht die Breite eines Elements über mehrere Spalten
column-fill: Spaltenanordnung
Um ein schönes Spaltenlayout zu erstellen, müssen Sie mindestens Folgendes benötigen So verwenden Sie Column-Count und Column-Gap:
/* 3 Spalten, 10 Pixel Abstand zwischen jeder Spalte*/ul.col-3 {
column-count: 3; column-gap: 10px;}
Wenn Sie Wenn Sie Wenn Sie den Abstand zwischen den Spalten verschönern möchten, ist das auch ganz einfach:
/* 3 Spalten, 10 Pixel Abstand zwischen jeder Spalte, mit einer goldenen Isolationslinie*/ul.col-3 {
column-count: 3; column-gap: 10px; column-rule: 1px solid #fc0;}
Das angegebene Element kann sich auch über mehrere Spalten erstrecken:
/* Nehmen Sie den folgenden HTML-Code als Beispiel:
<div> <h3>表头!</h3> <div>列 1</div> <div>列 2</div> <div>列 3</div> <div>列 4</div> <div>列 5</div> <div>列 6</div> <div>列 7</div> <div>列 8</div> <div>列 9</div> <div>列 10</div> <div>列 11</div> <div>列 12</div> </div>
*/div.col-3 { column-count: 3; column-gap: 5px;}div.col-3 h2 { column-span: all; text-align:center; background: #eee;}
Es ist Sehr einfach und die angezeigten Ergebnisse entsprechen genau unseren Erwartungen!
Die Verwendung von CSS3-Spalten zum Erstellen von Seitenlayouts hat viele Vorteile: Sie müssen die Breite nicht berechnen und Sie müssen sich keine Sorgen darüber machen, ob der Inhalt das Layout beeinträchtigt. Das System berechnet diese mathematisch Probleme für Sie. Eine andere ist eine klare und übersichtliche Semantik.
Der obige Inhalt befasst sich mit dem Seitenlayout für die Spaltenerstellung von CSS3. Ich hoffe, dass er für alle hilfreich ist.
Verwandte Empfehlungen:
Hauptfunktionale Anwendungen von CSS3
So erstellen Sie ein responsives Layout mit CSS3
Das obige ist der detaillierte Inhalt vonCSS3 Columns ist ein nützliches Spaltenlayout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!