/ / Foundation 5: Nicht verschachteltes Layout - zurb-foundation

Grundlage 5: Nicht verschachteltes Layout - zurb-foundation

Ich benutze die Grundlage 5 Rahmen und versuche, ein Problem zu lösen, das ich habe. Sagen wir, ich habe ein Layout wie dieses.

<div class="row">
<div class="large-15 columns">
<div class="large-9 columns">

</div>

<div class="large-6 columns">
<div class="large-3 columns">
<p>stuff</p>
</div>
<div class="large-3 columns">
<p>stuff</p>
</div>
</div>
</div>
</div>

Wie kann ich die .large-3 Spalten von der Verschachtelung stoppen? Ich möchte, dass jede .large-3-Spalte die Hälfte ihrer übergeordneten Spalte (.large-6) einnimmt. Ist das möglicherweise, oder mache ich es falsch?

Antworten:

0 für die Antwort № 1

Zunächst einmal sind Foundation Grids 12 Einheiten breit. Wenn Sie also kein benutzerdefiniertes Grid erstellt und kein benutzerdefiniertes CSS dafür geschrieben haben, bedeutet Groß-15 nichts.

Wenn das gesagt wird, wird dies die rechte Hand teilenSpalte in der Hälfte, mit einem 12-Einheiten-Raster. Jede Zeile im Raster muss bis zu 12 ergeben, egal wie tief sie verschachtelt ist. Wenn Sie die notwendige Struktur für ein 15-Einheiten-Netz aufstellen, würde das gleiche Prinzip gelten, obwohl es viel schwieriger wäre, die Dinge in zwei Hälften zu teilen.

<div class="row">
<div class="large-12 columns">
<div class="large-7 columns">
<p>stuff</p>
</div>
<div class="large-5 columns">
<div class="large-6 columns">
<p>stuff</p>
</div>
<div class="large-6 columns">
<p>stuff</p>
</div>
</div>
</div>
</div>

0 für die Antwort № 2

Ich denke du brauchst Blockraster. http://foundation.zurb.com/docs/components/block_grid.html.

Wenn Sie ein Blockraster mit der Klasse "Small-Block-Grid-2" und mit zwei "Li" erstellen, nehmen beide li die Hälfte der verfügbaren Breite ein.

Auch ich zeige deinen letzten Kommentar, wenn du keine Marge brauchst, dann füge die Kollatierungsklasse zu "row" div hinzu.

Ich hoffe das hilft.