Question

我有一个关于底部对齐的问题，我找不到任何解决方案。

所有div都包含在一个主div中，一个是浮动的，另一个必须放在它的右边;
其中只有一个必须是底部对齐，但尝试使用位置绝对和底部标记，它放在浮动的标记上。

CSS：

#container {width:730px;position: relative;min-height:120px;}
#image_box    {width:220px; float:left; padding-right:10px;background:#222;color:#FFF;}
#box_dx1   {width:500px;background:#666;}
#box_dx2   {width:500px;padding-top:10px;background:#999;}
#box_dx3   {width:500px;padding-top:10px;background:#CCC;}

HTML：

<div id="container">
  <div id="image_box">Box Sx Image <br>Row<br>Row<br>Row<br>Row<br>Row<br>Row</div>
  <div id="box_dx1">Box Dx Title</div>
  <div id="box_dx2">Box Dx Description</div>
  <div id="box_dx3">Box Dx Param</div>
</div>

此外div的高度是可变的，image_box是可选的（不能存在），box_dx2的文本可以包装在image_box下。

有什么想法吗？谢谢！

Answer 1

如果box_dx1，box_dx3和image-box的高度始终相同，则可以为min-height设置box_dx2。这样，如果您向box_dx2添加更多内容，它最终会变得比图像更高，文本将围绕它。在您的示例中，它将类似于：

#box_dx2 { 
    width: 500px; 
    padding-top:10px; 
    background:#999; 
    min-height: 70px; 
}

jsFiddle

但是，如果这些框的高度没有固定，可能最简单的方法是使用一些jQuery来计算min-height。

CSS底部对齐浮动div

1 个答案: