使響應式畫廊HTML / CSS

Question

我正在嘗試使用HTML / CSS創建一個響應式畫廊，如下所示：

那就是我的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;}

使用當前代碼，我將獲得下一個網格

第三分區的位置不正確，因為第一個分區的長度比第二個分區的長，因此第二個分區之后會出現混亂。

如果我每隔div后添加clear:both ，就會得到：

存在差距，因為某些div比其他更長。 那不是我想要的

我應該怎么做才能像第一張照片一樣獲得響應式畫廊？

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>

這是css，column-count是您將擁有的列數，在您的情況下為2。

.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

請參見下面的代碼示例。 它包含文本，但是您可以將其替換為圖像。

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>