浮動div的CSS底部對齊

Question

我對div的底部對齊有疑問，但找不到任何解決方案。

所有的div都包含在一個主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的高度始終相同，則可以為box_dx2設置min-height 。 這樣，如果將更多內容添加到box_dx2 ，則最終它將變得比圖像和文本高。 在您的示例中，它將類似於：

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

jsFiddle

但是，如果這些框的高度不是固定的，則可能很容易的事情是使用某些jQuery計算min-height 。