对齐 div 元素内的块答案

【问题标题】：Align blocks inside div element对齐 div 元素内的块
【发布时间】：2013-09-10 09:25:57
【问题描述】：

我的代码如下所示：

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

【问题讨论】：

把它放在你的 CSS .row > div { display: inline-block;垂直对齐：底部；}

标签： html css

【解决方案1】：

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

把它放在你的 CSS

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

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

看看这个fiddle：

更新： Updated fiddle

在选择器中使用.row > div，因为您的标记在.row 中有其他嵌套的div，并且您不想影响它们。 > tou 仅影响 .row 的直接子代
您正在浮动行，这导致它们不对齐。删除浮动（现在您还可以删除标记末尾的 clear div）
删除浮动时，您会注意到行不适合在同一行中，这是由于标记中行之间的新行导致行之间的额外间距。最简单的解决方法就是我所做的（通过删除标记之间的空格），在此处查看更多信息How do I remove extra margin space generated by inline blocks?
最后，它们不是行，而是列。

【讨论】：

我试过了，但它对我不起作用。请再看问题，我已经更新并在jsfiddle中添加了代码。
谢谢！我不知道这个内联块的事情。

【解决方案2】：

你可以使用这个css

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

【讨论】：

【解决方案3】：

你可以这样使用：

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

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

demo

【讨论】：

【解决方案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 并确保所有块都符合相同的大小，我还添加了尺寸。

【讨论】：

你忘了说你固定了高度。我的解决方案适用于动态高度。