Question

我的代码如下：

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

我想用底部对齐块。我怎么能这样做？

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

Answer 1

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

将此内容放入 CSS

中

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

<强>通知： >选择器不适合IE7，因此，如果您需要考虑此浏览器，请选择.row div作为选择器。但如果您不关心IE7，请使用'＆gt;'因为它更具特色。

查看此fiddle：

<强>更新 Updated fiddle

在selctor中使用.row > div，因为您的标记在.row中有其他嵌套div，并且您不想影响它们。使用> tou只会影响.row
您正在浮动您的行，这导致它们无法对齐。删除浮动（现在您也可以删除标记末尾的clear div）
当删除浮动时，您会注意到行不适合同一行，因为行之间的额外间距是由标记中的行之间的新行引起的。最容易解决的问题就像我一样（通过删除标记之间的空格），请在此处查看更多内容How do I remove extra margin space generated by inline blocks?
最后，它们不是行，而是列。

Answer 2

您可以使用此css

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

Answer 3

您可以这样使用：

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

但如果我理解你的问题你应该添加额外的标记，例如<br />，但最好在包含img标记的div之后使用clearfix技术。

demo

Answer 4

这是您的解决方案： jsFiddle - with code edit

.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并确保所有块符合相同的大小，我还添加了维度。

对齐div元素内的块

4 个答案: