2 Spalten reagieren Mauerwerk-Layout ohne Javascript?

Ich habe eine Anzahl von divs mit dynamischer Höhe Ich möchte in zwei Spalten, die unmittelbar nach dem anderen anzuzeigen, idealerweise ohne Javascript (und Bibliotheken wie Verpackung, Mauerwerk usw.).2 Spalten reagieren Mauerwerk-Layout ohne Javascript?

Ich habe mit display: inline-blockjsbin begonnen

Ich habe auch versucht Easy Masonry Layout With Flexbox ohne Erfolg folgende jsbin

ich das DOM in separaten Spalten strukturieren könnte, aber das ist nicht ideal, da sie in kollabieren müssen eine einzelne Spalte auf dem Handy. entlang der Linien dieses

Natürlich einfach mit inline-Block führt zu einer unerwünschten Lücke:

EDIT: aktualisierte Diagramme mehr klar gewünschtes Ergebnis zu sein, - von links nach rechts Spalten ohne unerwünschte Lücken

Quelle

2016-08-08 waffl

Angenommen, mögen Sie dieses Element gehen rechts und dann nach unten und über die Antwort ist nein! –

Sie sollten float: left css zu all Ihren divs setzen.

<div style="float:left; display:inline-block;"> 
    these divs will be displayed next to each other. 
</div>

Ich hoffe, das wird Ihnen helfen.

Quelle

2016-08-08 17:06:45

schwebt links funktioniert nicht, wenn die Artikel nicht von gleicher Höhe sind – waffl

Für mich funktioniert es auch mit verschiedenen Höhen. Kannst du auch Code hinzufügen? oder plündern? –

Hier ist ein Beispiel auf Jsbin, der größere Artikel bricht das Layout: http://jsbin.com/jugimuyone – waffl

Sie können jetzt CSS columns verwenden, ohne sich Sorgen über die Browserunterstützung zu machen. Ältere IE-Versionen sind der einzige potentielle Blocker, abhängig von Ihrer Zielgruppe. Es gibt auch noch einige Browser-Macken, aber ich benutze sie schon seit einiger Zeit in der Produktion. Es ist Ihre einzige echte Option für ein mauerwerkartiges Layout ohne JS.

Quelle

2016-08-08 18:26:39 carl

Sorry ich hätte geklärt, die Artikel müssen von links nach rechts gehen, nicht in typischen von oben nach unten Spalten – waffl

@ Waffl solltest du dann von flexbox bekommen können, was du brauchst. Spielen Sie einfach mit diesen Parametern im Parent (align-content und/oder justify-content, flex-direction) und auf den untergeordneten Elementen (flex-grow/flex-shrink). [Siehe hier] (https: // css- tricks.com/snippets/css/a-guide-to-flexbox/) – carl

Hier ist eine Lösung, die Sie flex für diesen CSS

.flex-container {padding: 0; margin: 0; list-style: none; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; justify-content: space-around; } 
.flex-item {background: tomato; padding: 5px; width: 200px; height: 150px; margin-top: 10px; line-height: 150px; color: white; font-weight: bold; font-size: 3em; text-align: center; } 
#fl-item{height:200px;}

und HTML von links verwenden können

<ul class="flex-container"> 
    <li class="flex-item" id="fl-item">1</li> 
    <li class="flex-item">2</li> 
    <li class="flex-item">3</li> 
    <li class="flex-item">4</li> 
    <li class="flex-item">5</li> 
    <li class="flex-item">6</li> 
</ul>

Und man kann sehen, arbeitet Plunker

Quelle

2016-08-09 06:01:08

Dies scheint nicht zu funktionieren, da es immer noch eine unerwünschte Lücke in der oberen Reihe gibt – waffl

2 Spalten reagieren Mauerwerk-Layout ohne Javascript?

Antwort

Verwandte Themen