作る私はここのようにHTML/CSSを使用して応答ギャラリーを作成しようとしている

Question

応答ギャラリーHTML/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;} 

：私のHTMLとCSSのthats

コード私は次のグリッドを得ています

3番目のdivは正しい場所にありません。最初のものは2番目のものより長く、2番目のdivの後にはchaがあるためですos。 div要素のいくつかは他よりも長いので、ギャップがあります

：

私は毎秒のdiv clear:both後に追加した場合、私はこれを取得します。それは私が望むものではありません。

私の最初の写真のようなレスポンシブなギャラリーを入手するにはどうすればよいですか？

Answer 1

flexboxを使用して石工レイアウトを作成できます。次に例を示します。

<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> 

そしてここ

.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; 
    } 
} 

Answer 2

2.コード例は、以下を参照してくださいになることをお使いの場合には、CSS、列数はあなたが持っているだろうどのくらいの列です。これにはテキストが含まれていますが、これは画像で置き換えることができます。

CSSとHTMLコード

*, *: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>