Wie kann man ein Div ohne CSS-Raster oder HTML-Tabellen über mehrere Zeilen und Spalten verteilen?

So verteilen Sie ein Div über mehrere Zeilen und Spalten ohne CSS-Raster oder HTML-Tabellen

Oft stehen wir vor der Aufgabe, ein gitterartiges Layout mit übergreifenden Elementen zu erstellen mehrere Zeilen und Spalten. Die Verwendung von CSS Grid oder HTML Tables ist jedoch möglicherweise nicht der gewünschte Ansatz. Dieser Artikel bietet eine Lösung ohne Raster und ohne Tabelle.

Stellen Sie sich ein Snippet mit einer Zeile mit fünf Elementen vor, mit dem Ziel, größere Elemente in der Mitte zu platzieren. Mithilfe der display:inline-block-Eigenschaft können wir ein horizontales Layout erreichen:

<code class="css">#wrapper {
  width: 516px;
}

.block {
  display: inline-block;
  width: 90px;
  height: 50px;
  margin: 5px;
  background-color: red;
}</code>

Aber wie gehen wir mit der vertikalen Aufteilung um?

Im Jahr 2017 veröffentlichten die wichtigsten Browser jedoch Updates mit Volle Unterstützung für CSS Grid Layout, was eine unkomplizierte Lösung bietet. Durch die Verwendung der display:grid-Eigenschaft können wir ein Rasterlayout erstellen, ohne HTML zu ändern oder verschachtelte Container hinzuzufügen:

<code class="css">#wrapper {
  display: grid;                            
  grid-template-columns: repeat(5, 90px);   
  grid-auto-rows: 50px;                     
  grid-gap: 10px;                           
  width: 516px;
}</code>

Um Elemente über mehrere Zeilen und Spalten zu verteilen, verwenden wir die Rasterzeile und die Rasterspalte Eigenschaften:

<code class="css">.tall {
  grid-row: 1 / 3;                          
  grid-column: 2 / 3;                       
}

.wide {
  grid-row: 2 / 4;                          
  grid-column: 3 / 5;                       
}</code>

Somit erreichen wir ein Rasterlayout mit Elementen, die sich über mehrere Zeilen und Spalten erstrecken, ohne auf HTML-Tabellen oder CSS-Raster zurückgreifen zu müssen.

Das obige ist der detaillierte Inhalt vonWie kann man ein Div ohne CSS-Raster oder HTML-Tabellen über mehrere Zeilen und Spalten verteilen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!