当并排浮动时，如何将两个div对齐？

Question

我在网页上有两个可见的框，一个浮在左边，另一个浮在右边。我希望这些盒子沿着底部对齐。问题是，有一个盒子的高度会因不同的屏幕宽度而改变，因为它包含文本，当文本包裹高度增加时。另一个框没有任何文本，可以是任何高度，但它上面有文本，这将根据文本包装的数量改变框的y位置。

我想通过更改不包含文本的框的高度来对齐这两个框，或者增加其上方的填充/边距。我不想更改右框的高度，我希望左上方文本和右侧框顶部保持对齐。如果可能只使用CSS，但JavaScript解决方案是可以接受的，最好不要使用jQuery或其他插件。

我已将外部div定义为width设置为100%，部分padding，以便页面上的内容从边缘插入。在这个外部div中，div是float left，width设置为35%。其中div是包含文字的div，而div的兄弟是另一个div，其中不包含height为div的文字我可以改变的固定值。然后有一个外部float的子项框，right width 60%，height设置为<div id="outerDiv" style="width:100%; padding:5%;"> <div id="leftContainer" style="float:left; width:35%;"> <div id="topText">some text here...</div> <div id="bottomEmptyBox" style="width:100%; height:200px;"></div> </div> <div id="rightContainerBox" style="float:right; width:60%;"> <div id="containedText">some text here...</div> </div> </div> 。由于此框包含的包装文本，浏览器宽度减小时，此框将在{{1}}中增加 - 我不希望修改其高度。

{{1}}

Answer 1

Jsfiddle Demo

这似乎是实现大部分目标的良好基础

<强> CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

#outerDiv {
    display: table;
}
#leftContainer,
#rightContainerBox {
    display: table-cell;
}
#bottomEmptyBox {
    border:1px solid red;
}

#topText {
   padding-bottom: 15px;
}

#rightContainerBox {
    border:1px solid green;
}

Answer 2

提供父div display: table;或display:table-row和子div display:table-cell

如有必要，还可以添加高度auto。或者它将默认使用。

或者你可以使用jQuery插件，如果你需要很多可扩展的。

http://brm.io/jquery-match-height-demo/