CSS3 Columns ist ein nützliches Spaltenlayout

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:

So verwenden Sie CSS3 und JS, um einen dynamischen Hintergrund aus aufsteigenden Blöcken zu erstellen

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!