并排浮动时，一个底对齐两个div如何？

Question

我在网页上有两个可见的框，一个漂浮在左侧，另一个漂浮在右侧。 我希望这些框沿底部对齐。 问题是，有一个框的高度将针对不同的屏幕宽度而变化，因为它包含文本，并且当文本换行时，高度会增加。 另一个框没有任何文本，可以是任何高度，但是它上面有文本，这将根据换行的多少来更改框的y位置。

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

我定义了一个外部div ，其width设置为100%并添加了一些padding以便页面的内容从边缘插入。 在这个外部div是一个left float的div ，其width设置为35% 。 在该div是一个包含文本的div ，该div的同级是另一个div ，该div是不包含其height是我可以更改的固定值的文本的框。 然后有一个盒子是外部div的子div ，该盒子right float ， 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>

Answer 1

Jsfiddle演示

这似乎是实现大多数目标的良好基础

的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和child div display:table-cell

如果需要，还可以添加自动高度。 否则将默认使用。

或者，如果您需要更大的可扩展性，则可以使用jQuery插件。

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