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

Question

I have two boxes visible on a web page, one floating on the left and the other floating on the right. I want these boxes to align along the bottom. The problem is, there is one box whose height will change for different screen widths because it contains text and when the text wraps the height increases. The other box doesn't have any text and can be any height, but it has text above it which will change the box's y position depending on how much text wraps.

I would like to bottom align the two boxes by changing the height of the box that contains no text, or increase the padding/margin above it. I do not want to change the right box's height, and I want the top left text and the top of the right box to remain aligned at the top. If possible only using CSS, but a JavaScript solution would be acceptable, preferably no jQuery or other plugins.

I have defined an outer div with width set to 100% and some padding so that the content on the page is inset from the edges. Inside this outer div is a div that is float ing left , width set to 35% . Inside that div is a div that contains text, and a sibling to that div is another div that is the box that contains no text whose height is a fixed value that I can change. Then there is a box that's a child of the outer div , which is float ing right with width set to 60% . This box will increase in height as the browser width decreases due to the wrapping text this box contains - I don't wish to modify its 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 Demo

This would seem to be a good base that achieves most of your objectives

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

Give parent div display: table; or display:table-row and child div display:table-cell

Also add height auto if necessary. Or it will take by default.

Or you can use jQuery plugin if you need much scalable.

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