Maurerarbeit für Pfosten erfolglos

Question

Ich versuchte auf viele Arten, Maurerarbeitart für meine Pfosten zu schaffen, obwohl die einzige Weise, die es fast perfekt funktioniert, der Schwimmer ist: gelassen. Aber manchmal gibt es eine Lücke zwischen ihnen erscheint, ich suche eine gute Lösung für dieses Problem, dort weise ich meine css und html bis jetzt hinzufügen.

<script async src="//jsfiddle.net/ariefroni/gd9nna8m/4/embed/"></script> 

jsfiddle: https://jsfiddle.net/ariefroni/gd9nna8m/4/

eine Lösung für mein Problem ist willkommen, danke. auch ich habe nichts dagegen, Skript wenn nötig zu verwenden.

Answer 1

an einen gemauerten Layout erstellen wir die Verwendung der CSS-Eigenschaften column-count und column-gap, die angewendet werden, um das übergeordnete Element machen, die Anzahl der Spalten in Ihrem Layout zu bestimmen:

.masonry { /* Masonry container */ 
    -moz-column-count: 4; 
    -webkit-column-count: 4; 
    column-count: 4; 
    -moz-column-gap: 1em; 
    -webkit-column-gap: 1em; 
    column-gap: 1em; 
} 

Sie dann diese anwenden müssen Stil für jedes Kind:

.item { /* Masonry bricks or child elements */ 
    display: inline-block; 
    margin: 0 0 1em; 
    width: 100%; 
} 

this tutorial werden Ihnen genau zeigen, wie Mauerwerk-Stil-Layout erstellen. Here's what you'll end up with.

Der Demo-Markup ist wie folgt:

<div class="masonry"> 
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> 
    <div class="item">Neque, vitae, fugiat, libero corrupti officiis sint facilis tempora quidem repudiandae praesentium odit similique adipisci aut.</div> 
    <div class="item">Incidunt sit unde minima in nostrum?</div> 
    <div class="item">Ducimus, voluptates, modi, delectus animi maiores consequuntur repellat quisquam fugiat eum possimus enim culpa totam praesentium magni quae!</div> 
    <div class="item">Lorem ipsum dolor sit amet, dicta dolore adipisci hic ipsam velit deleniti possimus cumque accusantium rerum quibusdam.</div> 
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, praesentium consequatur ducimus commodi quam ex illo omnis dicta reiciendis vel nesciunt deserunt aut sequi nam mollitia perferendis ipsam possimus temporibus!</div> 
    <div class="item">Ab, adipisci, temporibus eaque quis harum perferendis incidunt cupiditate doloribus dolor numquam voluptates ipsum dolore aspernatur et voluptate ipsam beatae animi culpa.</div> 
</div> 

Das Tutorial auch einen Link zu einem JS fallback für älteren Browser

und das ist alles, was Sie ein Mauerwerk-Layout erstellen erforderlichen :)