1

我的代码如下所示：

<div class="row">
  <div>
    <img src="img1.jpg" />
  </div>
  <div>
    <img src="img2.jpg" />
  </div>
  <div>
    <img src="img3.jpg" />
  </div>
</div>

我想通过底部对齐块。我怎样才能做到这一点？

更新：谢谢你们的回答，我不知道为什么，但他们没有帮助我。所以这里是 js fiddle 中真正的 html 代码：http: //jsfiddle.net/rZvqK/

4

4 回答 4

1

从我的原始答案（在评论中），

把它放在你的CSS中

.row > div
{
    display: inline-block;
    vertical-align: bottom
}

注意： 选择>器不能很好地与 IE7 配合使用，因此如果您需要考虑使用此浏览器，请.row div选择选择器。但如果您不关心 IE7，请使用“>”，因为它更特别。

看看这个小提琴：

更新： 更新小提琴

  1. 在选择器中使用.row > div，因为您的标记中有其他嵌套的 div.row并且您不想影响它们。with the >tou 只影响.row

  2. 你浮动你的行，这导致它们不对齐。删除浮动（现在您还可以删除clear标记末尾的 div）

  3. 删除浮动时，您会注意到行不适合同一行，这是由于标记中行之间的新行导致行之间的额外间距。最简单的解决方法就是我所做的（通过删除标记之间的空格），在此处查看更多信息如何删除内联块生成的额外边距空间？

  4. 最后，它们不是行，而是列。

于 2013-09-10T09:37:35.373 回答
0

你可以使用这个CSS

.row div{
    display:inline-block;
    vertical-align:bottom;
}
于 2013-09-10T09:28:06.410 回答
0

你可以这样使用：

.row > div{
display: table-cell;
vertical-align: bottom;
}

但是，如果我正确理解您的问题，您应该在包含标签的 div 之后添加一个额外的标记，<br />但最好在此处使用 clearfix 技术img。

演示

于 2013-09-10T09:28:54.303 回答
0

这是您的解决方案： jsFiddle - 带有代码编辑

.spacer a{        
    position: relative;
    display: block;
    width: 150px;
    height: 200px;
}
.spacer img{
    margin-top: 6px;
    max-width: 100%;
    height: auto;
    position: absolute;
    bottom: 0px;
 }

这个想法是将父块设置为position: relative，子块设置为 position: absolute; bottom:0px;

请注意，因为在您的情况下，父标签是我还添加的锚点display:block，并且为了确保所有块符合相同的大小，我还添加了尺寸。

于 2013-09-11T07:32:21.683 回答