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比第二个更长，所以在第二个div之后会出现混乱。

如果我在每隔二分clear:both之后添加，我会得到这个：

存在差距，因为有些div比其他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代码

＆＃13;

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

＆＃13;

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

＆＃13;

制作响应式图库HTML / CSS

2 个答案: