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

Question

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

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

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

我希望每 "line" 张照片都对齐。

我正在使用 bootstrap。这个图库应该是响应式的，我正在寻找 CSS-only 解决方案，因为我不想添加 extra/non-semantic 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

最简单的 CSS-only 解决方案是简单地将 clear: left; 应用于行中的每个第一个元素，具体取决于 window 大小：

@media (max-width: 800px) {
  .gallery li:nth-child(3n) {
    clear: left;
  }
}

@media (min-width: 800px) {
  .gallery li:nth-child(5n) {
    clear: left;
  }
}

演示： http://codepen.io/anon/pen/ogZNvL

Answer 2

一种方法是将 span 定位为 absolute（包含在其父 a 中）设置为 bottom: 0。这样文本的溢出将向上而不是向下：

.gallery a {
   display: block;
   color: #fff;
   text-decoration: none;
   position: relative;
   overflow: hidden;
}

.post-txt {
   position: absolute;
   bottom: 0;
   width: 100%;
   display: block;
   background-color: #01558d;
   font-family: 'Voces', cursive;
   font-size: 11px;
   font-weight: bold;
   padding: 4px 8px;
   word-break: break-word;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

EXAMPLE 1

或

您可以使用 css 版本的截断：

.post-txt {
   width: 100%;
   display: block;
   background-color: #01558d;
   font-family: 'Voces', cursive;
   font-size: 11px;
   font-weight: bold;
   padding: 4px 8px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

EXAMPLE 2

或

结合两者：使用省略号并在悬停时显示其余部分：

.post-txt {
  width: 100%;
  display: block;
  background-color: #01558d;
  font-family: 'Voces', cursive;
  font-size: 11px;
  font-weight: bold;
  padding: 4px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: absolute;
  bottom: 0;
 }

 .gallery li a:hover .post-txt{
    overflow: visible;
    text-overflow: none;
    white-space: normal;
    position: absolute;
 }

EXAMPLE 3

Answer 3

这完成得非常快并且未经测试。

它会将所有图像 div 设置为相同的高度。设置每张图片的id div 为：

id="imgX"

其中 X = 1-8（对于 8 张图像）

var max = 0;
var did,len;
img = new Array;
var divs = document.getElementsByTagName("div");
for (var div=0; div<divs.length; div++){
  did = divs[div].getAttribute("id");
  if (did != null && did.substring(0,3) == "img"){
    img[].push(div);
    len = divs[div].offsetHeight;
    if (len > max)(max = len;}

  }
  for (var div=0; div<img.length; div++){
    divs[img[div]].style.height= (max+ 'px');
  }
}

CSS解决方法见：

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Answer 4

使用内联块

这是一种方法。

关键是在 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>

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

How to make floated list items go down instead of being push aside when previous elements don't have the same height?

html

css

twitter-bootstrap

或

或