html - 当前面的元素不具有相同的高度时，如何使 float 列表项下降而不是被推到一边？

Question

以下是我目前拥有的...

...但是当您在其中一项中添加额外的文本时，您会得到这个...

...元素被推到一边，使列表看起来很难看。我想实现以下目标:

我希望照片的每一“行”都对齐。

我正在使用 Bootstrap 。这个画廊应该是响应式的，我正在寻找一个纯 CSS 的解决方案，因为我不想添加额外的/非语义的 HTML。

代码笔:http://codepen.io/nunoarruda/pen/vExBxN

.gallery {
  list-style: none;
  padding: 0;
}

.gallery li {
  margin-bottom: 24px;
}

.gallery a {
  color: #fff;
  text-decoration: none;
}

.gallery img {
  display: block;
  width: 100%;
}

.post-txt {
  display: block;
  background-color: #01558d;
  font-family: 'Voces', cursive;
  font-size: 11px;
  font-weight: bold;
  padding: 4px 8px;
}

有什么想法吗？

Answer 1

使用内联 block

这是一种方法。

关键是在li元素上使用display: inline-block，并应用vertical-align: top获取顶部边缘对齐。

还需要指定宽度，我用width: 20%来演示。我不确定这是否会为您提供布局所需的控制，但您是最好的判断者。

无论如何，至少这可以让你开始。

.gallery {
  list-style: none;
  padding: 0;
}

.gallery li {
  margin-bottom: 24px;
  display: inline-block;
  vertical-align: top;
  width: 20%;
}

.gallery a {
  color: #fff;
  text-decoration: none;
}

.gallery img {
  display: block;
  width: 100%;
}

.post-txt {
  display: block;
  background-color: #01558d;
  font-family: 'Voces', cursive;
  font-size: 11px;
  font-weight: bold;
  padding: 4px 8px;
}

<ul class="row gallery">
  <li class="col-xs-6 col-sm-3"><a href="#"><img src="https://s3.amazonaws.com/peoplejar-production/assets/12395/original/post-image.jpg?1419981725"><span class="post-txt">Family out tailgating and more text</span></a></li>
  <li class="col-xs-6 col-sm-3"><a href="#"><img src="https://s3.amazonaws.com/peoplejar-production/assets/12395/original/post-image.jpg?1419981725"><span class="post-txt">Family out tailgating</span></a></li>
  <li class="col-xs-6 col-sm-3"><a href="#"><img src="https://s3.amazonaws.com/peoplejar-production/assets/12395/original/post-image.jpg?1419981725"><span class="post-txt">Family out tailgating</span></a></li>
  <li class="col-xs-6 col-sm-3"><a href="#"><img src="https://s3.amazonaws.com/peoplejar-production/assets/12395/original/post-image.jpg?1419981725"><span class="post-txt">Family out tailgating</span></a></li>
  <li class="col-xs-6 col-sm-3"><a href="#"><img src="https://s3.amazonaws.com/peoplejar-production/assets/12395/original/post-image.jpg?1419981725"><span class="post-txt">Family out tailgating</span></a></li>
  <li class="col-xs-6 col-sm-3"><a href="#"><img src="https://s3.amazonaws.com/peoplejar-production/assets/12395/original/post-image.jpg?1419981725"><span class="post-txt">Family out tailgating</span></a></li>
  <li class="col-xs-6 col-sm-3"><a href="#"><img src="https://s3.amazonaws.com/peoplejar-production/assets/12395/original/post-image.jpg?1419981725"><span class="post-txt">Family out tailgating</span></a></li>
  <li class="col-xs-6 col-sm-3"><a href="#"><img src="https://s3.amazonaws.com/peoplejar-production/assets/12395/original/post-image.jpg?1419981725"><span class="post-txt">Family out tailgating</span></a></li>
</ul>