制作响应画廊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不是在正确的地方，因为第一个比第二个更长，所以在第二个div之后有一个cha操作系统。

如果我每天第二个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，列数是你将有多少列有，你的情况，这将是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>