2016-07-21 23 views
1

Ich versuche, eine ansprechende Galerie mit HTML/CSS zu erstellen, wie hier in: numbered green div boxes in masonrymachen ansprechende Galerie HTML/CSS

Das ist meine HTML und CSS:

<div id="flow" class="container-fluid clear"> 
    <div id="photographies"> 
     {% for photo in photographies %} 
      <div class="flow-photo {% if loop.index0 is odd %}odd{% endif %}"> 
       <a href="{{ path('photo', { id: photo.getId }) }}"><img id="{{ photo.getId }}" src="{{ photo.getImage }}"></a> 
       <div class="info"> 
        <div class="description"> 
         <h1>{{ photo.getTitle }}</h1> 
        </div> 
       </div> 
      </div> 
     {% endfor %} 
    </div> 
</div> 
#flow {background:#f1f1f1;padding: 0.5% 1%;} 
.flow-photo {width:49.5%;float:left;margin:0.5% 0;} 
.odd {margin-left:1%} 
.flow-photo>a>img {width:100%;height:auto;border-radius:2px 2px 0 0;} 
.info {background:#fff;border-radius:0 0 2px 2px;text-align:left;padding:7px} 
.info h1 {margin:0;font-weight:700;font-size:11px;} 

Mit diesem Strom Code Ich bekomme das nächste Gitter numbered green div boxes in masonry

Das dritte div ist nicht an der richtigen Stelle, denn das erste ist länger als das zweite, also nach dem zweiten div gibt es einen cha os.

Wenn ich nach jedem zweiten div hinzufügen clear:both, bekomme ich diese:

numbered green div boxes in masonry

Es gibt Lücken, weil einige divs länger als andere sind. Das ist nicht was ich will.

Was soll ich tun, um Responsive Galerie wie in meinem ersten Bild zu bekommen?

+0

, warum Sie nicht das Layout Mauerwerk? dieser: http://maurerei.desandro.com/layout.html –

Antwort

0

Mit flexbox können Sie ein Mauerwerk erstellen. Hier ist das Beispiel:

<div class="masonry-layout"> 
    <div class="masonry-layout__panel"> 
    <div class="masonry-layout__panel-content"> 
     <-- CONTENT HERE --> 
    </div> 
    </div> 
    <div class="masonry-layout__panel"> 
    <div class="masonry-layout__panel-content"> 
     <-- CONTENT HERE --> 
    </div> 
    </div> 
    <div class="masonry-layout__panel"> 
    <div class="masonry-layout__panel-content"> 
     <-- CONTENT HERE --> 
    </div> 
    </div> 
    <-- FOLLOWING CONTENT PANELS --> 
</div> 

Und hier ist die CSS, column-count ist, wie viel Spalten, die Sie haben, in Ihrem Fall, dass 2 sein wird

.masonry-layout { 
    column-count: 2; 
    column-gap: 0; 
} 
.masonry-layout__panel { 
    break-inside: avoid; 
    padding: 5px; 
} 
.masonry-layout__panel-content { 
    padding: 10px; 
    border-radius: 10px; 
} 

@media screen and (max-width: 600px) { 
    .masonry-layout { 
    column-count: 1; 
    column-gap: 0; 
    } 
} 

@media screen and (min-width: 768px) and (max-width: 1024px) { 
    .masonry-layout { 
    column-count: 2; 
    column-gap: 0; 
    } 
} 
+0

Dies ist nicht flexbox, das sind CSS-Spalten. Sie haben kopiert das falsche Ding von hier eingefügt: https://medium.com/@_jh3y/how-to-pure-css-maurry-layouts-a8ede07ba31a#.82e1e6ksj – Aaron

0

finden Sie unter Codebeispiel. Dies enthält Text, aber Sie können dies durch Bilder ersetzen.

CSS und HTML-Code

*, *:before, *:after { 
 
    box-sizing: border-box !important; 
 
} 
 

 
article { 
 
    -moz-column-width: 13em; 
 
    -webkit-column-width: 13em; 
 
    -moz-column-gap: 1em; 
 
    -webkit-column-gap: 1em; 
 
} 
 

 
section { 
 
    display: inline-block; 
 
    margin: 0.25rem; 
 
    padding: 1rem; 
 
    width: 100%; 
 
    background: #efefef; 
 
} 
 

 
p { 
 
    margin: 1rem 0; 
 
} 
 

 
/* styles for background color, etc; not necessary for this thing to work */ 
 
body { 
 
    padding: 1em; 
 
    font-family: "Garamond", serif; 
 
} 
 

 
h1 { 
 
    font-size: 3rem; 
 
    font-weight: 800; 
 
} 
 

 
body { 
 
    line-height: 1.25; 
 
} 
 

 
p { 
 
    text-align: left; 
 
}
<h1>Pure CSS Masonry</h1> 
 
<p>By using CSS3 columns, we can easily create a Masonry.js-like layout where random-height blocks fit together.</p> 
 

 
<article> 
 

 
    <section> 
 
    <p>Lorem ipsum dolor sit amet, consectetur.</p> 
 
    </section> 
 
    
 
    <section> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error aliquid reprehenderit expedita odio beatae est.</p> 
 
    </section> 
 
    
 
    <section> 
 
    <p>Lorem ipsum dolor sit amet, consectetur.</p> 
 
    </section> 
 
    
 
    <section> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis quaerat suscipit ad.</p> 
 
    </section> 
 

 
    <section> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem nihil alias amet dolores fuga totam sequi a cupiditate ipsa voluptas id facilis nobis.</p> 
 
    </section> 
 

 

 
    <section> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem ut debitis dolorum earum expedita eveniet voluptatem quibusdam facere eos numquam commodi ad iusto laboriosam rerum aliquam.</p> 
 
    </section> 
 
    
 
    <section> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
 
    </section> 
 
    
 
    <section> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat architecto quis tenetur fugiat veniam iste molestiae fuga labore!</p> 
 
    </section> 
 
    
 
    <section> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit accusamus tempore at porro officia rerum est impedit ea ipsa tenetur. Labore libero hic error sunt laborum expedita.</p> 
 
    </section> 
 
    
 
    <section> 
 
    <p>Lorem ipsum dolor sit.</p> 
 
    </section> 
 
    
 
    <section> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima asperiores eveniet vero velit eligendi aliquid in.</p> 
 
    </section> 
 
    
 
    <section> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus dolorem maxime minima animi cum.</p> 
 
    </section> 
 
    
 
</article>