CSS-Spalten/Flexbox ohne Lücken zwischen den Elementen

Question

Ich brauche Lücken zwischen den Elementen in meinem Spaltenlayout loszuwerden. Ich kann das neueste css3 verwenden, da die Seite auf moderne Browser/Geräte ausgerichtet ist, aber ich muss eine JavaScript-Lösung vermeiden, so dass die Seite vom Server nicht basierend auf der Breite des Clients neu gerendert werden muss.

Mit Flexbox, CSS-Spalten und anderen Tricks muss ich ein Pinterest-like-Layout entlocken. (Pinterest verwendet Javascript und absolute Positionierung für ihr Layout, es wird nicht einmal mit deaktivierter js gerendert.) Die Site hat Boxen mit bekannter Breite aber variabler Höhe. Die Anzahl der Spalten muss basierend auf der Browserbreite variieren. (Ich kann diese Abfragen über Medien tun, wenn ich weiß, was CSS-Attribut zu ändern.) Hier ist, wie das aussieht: via

Beachten Sie auch, dass ich nicht nur die Höhe des Behälters erhöhen zu füllen der leere Raum. Ich möchte den Gegenstand darunter stellen, nicht alle Höhen zusammenbringen. (So ​​Stretching Artikel 1, 3 und 4 im Bild oben nicht das, was ich will.)

Dinge, die ich versucht habe:

• CSS 3 Spalten. Das sieht gut aus, aber die Artikel sind in der falschen Reihenfolge, wobei der zweite Artikel unter dem ersten steht. Wenn dies in eine andere Reihenfolge geändert werden kann, so dass sie von links nach rechts gehen, großartig!

• Flexbox verschiedene Flexbox-Konfigurationen, ich habe fast jede Einstellung ausprobiert, die ich ändern konnte.

• Javascript. Ja, ich weiß, dass ich manuell Spalten erstellen und sie bei der Größenänderung erneut rendern kann. Ich möchte eine teure Neu-Render-Operation vermeiden, die einen manuellen Abgleich von Spalten und Anzeige erfordert. Für ältere Browser, die keine css3-Lösung unterstützen, kann ich darauf zurückgreifen. Ich möchte auch vermeiden, alle Elemente manuell zu positionieren. Brutto.

Ich habe einen Kommentar Link zu JSFiddle setzen, weil ich es nicht hier als „Links benötigen Code jsfiddle“ setzen können.

Answer 1

Verwenden Sie http://desandro.github.io/masonry/ Mauerwerk wird dazu beitragen, Ihr Problem zu lösen, es ist, was Pinterest verwendet. Meine Firma benutzt es gerade, um ein Programm zu entwickeln, es ist sehr einfach und benutzerfreundlich.

Answer 2

Überprüfen Sie diese Demo. Das ist reiner css3-Mauereffekt. http://w3bits.com/labs/css-masonry/

Spinett von oben Link

body { 
 
    font: 1em/1.67 'Open Sans', Arial, Sans-serif; 
 
    margin: 0; 
 
    background: #e9e9e9; 
 
} 
 

 
.wrapper { 
 
    width: 95%; 
 
    margin: 3em auto; 
 
} 
 

 
.masonry { 
 
    margin: 1.5em 0; 
 
    padding: 0; 
 
    -moz-column-gap: 1.5em; 
 
    -webkit-column-gap: 1.5em; 
 
    column-gap: 1.5em; 
 
    font-size: .85em; 
 
} 
 

 
.item { 
 
    display: inline-block; 
 
    background: #fff; 
 
    padding: 1em; 
 
    margin: 0 0 1.5em; 
 
    width: 100%; 
 
    height: 150px; 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-shadow: 2px 2px 4px 0 #ccc; 
 
} 
 
.item.black{ 
 
background-color: #000; height:200px;} 
 
.item.blue{ 
 
background-color:blue; height:250px;} 
 
.item.green{ 
 
background-color:green; height:300px;} 
 

 
@media only screen and (min-width: 400px) { 
 
    .masonry { 
 
     -moz-column-count: 2; 
 
     -webkit-column-count: 2; 
 
     column-count: 2; 
 
    } 
 
} 
 

 
@media only screen and (min-width: 700px) { 
 
    .masonry { 
 
     -moz-column-count: 3; 
 
     -webkit-column-count: 3; 
 
     column-count: 3; 
 
    } 
 
} 
 

 
@media only screen and (min-width: 900px) { 
 
    .masonry { 
 
     -moz-column-count: 4; 
 
     -webkit-column-count: 4; 
 
     column-count: 4; 
 
    } 
 
} 
 

 
@media only screen and (min-width: 1100px) { 
 
    .masonry { 
 
     -moz-column-count: 5; 
 
     -webkit-column-count: 5; 
 
     column-count: 5; 
 
    } 
 
} 
 

 
@media only screen and (min-width: 1280px) { 
 
    .wrapper { 
 
     width: 1260px; 
 
    } 
 
}

<div class="masonry"> 
 
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> 
 
    <div class="item black">...</div> 
 
    <div class="item blue">...</div> 
 
    <div class="item green">...</div> 
 
    <div class="item black">...</div> 
 
    <div class="item blue">...</div> 
 
    <div class="item green">...</div> 
 
    <div class="item black">...</div> 
 
    <div class="item blue">...</div> 
 
    <div class="item green">...</div> 
 
</div>

Hoffe, das ist hilfreich für Sie.

Answer 3

Sie können es durch Flexbox erreichen:

HTML:

<div class="container"> 
    <div class="item">1</div> 
    <div class="item">2</div> 
    <div class="item">3</div> 
    <div class="item">4</div> 
    <div class="item">5</div> 
    <div class="item">6</div> 
</div> 

CSS:

.container { 
    max-width: 900px; 
    height: 470px; 
    display: flex; 
    flex-flow: column wrap; 
    align-items: flex-start; 
} 

.item { 
    height: 150px; 
} 

http://codepen.io/asim-coder/pen/vXzKgg

Answer 4

CSS3: die Haupt ul li Set, das alle 8 Tropfen hält -down-Panels zum Rand: 0 auto;

Answer 5

Nun, ein bisschen spät, könnte dies eine Lösung sein.

Ich verwende Flex, da es das einzige System ist, das die Reihenfolge ändern kann, wie Sie möchten.

Die drawbakcs dieser Methode ist, dass ich einige künstliche Elemente verwenden müssen als Separatoren wirken, und dass ich eine vorbestimmte Höhe auf dem Behälter

.container { 
 
    border: 1px solid black; 
 
    width: 90%; 
 
    height: 700px; 
 
    display: flex; 
 
    flex-flow: column wrap; 
 
    align-items: flex-start; 
 
} 
 
.item { 
 
    height: 150px; 
 
    width: 24%; 
 
    margin: 2px; 
 
} 
 
.item:nth-child(3n + 1) { 
 
    height: 200px; 
 
} 
 
.item:nth-child(3n + 2) { 
 
    height: 250px; 
 
} 
 
.item:nth-child(4n) { 
 
    background-color: orange; 
 
    order: 40; 
 
} 
 
.item:nth-child(4n + 1) { 
 
    background-color: green; 
 
    order: 10; 
 
} 
 
.item:nth-child(4n + 2) { 
 
    background-color: lightblue; 
 
    order: 20; 
 
} 
 
.item:nth-child(4n + 3) { 
 
    background-color: yellow; 
 
    order: 30; 
 
} 
 
.divider { 
 
    width: 1px; 
 
    background-color: red; 
 
    height: 100%; 
 
} 
 
.divider:nth-last-child(3) { 
 
    order: 15; 
 
} 
 
.divider:nth-last-child(2) { 
 
    order: 25; 
 
} 
 
.divider:nth-last-child(1) { 
 
    order: 35; 
 
}

<div class="container"> 
 
    <div class="item">1</div> 
 
    <div class="item">2</div> 
 
    <div class="item">3</div> 
 
    <div class="item">4</div> 
 
    <div class="item">5</div> 
 
    <div class="item">6</div> 
 
    <div class="item">7</div> 
 
    <div class="item">8</div> 
 
    <div class="item">9</div> 
 
    <div class="divider"></div> 
 
    <div class="divider"></div> 
 
    <div class="divider"></div> 
 
</div>