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

【问题标题】：How would one bottom-align two divs when floated side-by-side?当并排浮动时，一个底部如何对齐两个 div？
【发布时间】：2014-08-19 23:32:18
【问题描述】：

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

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

我定义了一个外部div，其中width 设置为100% 和一些padding，以便页面上的内容从边缘插入。在这个外部div 内部是一个div，即floating left，width 设置为35%。在div 内部是一个包含文本的div，而div 的兄弟是另一个div，它是不包含文本的框，其height 是我可以更改的固定值。然后有一个框是外部div 的子框，即floating 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>

【问题讨论】：

只是一个问题...设置max-height 和overflow:auto 怎么样？我不确定这对您的情况是否有帮助。
也可能使用position:absolute; bottom:0;left:0; 和position:absolute;bottom:0;right:0; 而不是浮点数。如果他们需要留在父容器中，只需给父容器position:relative;
我可以试试@GaryStorey。我刚刚编辑了问题，指出我希望左上角的文本和右框的顶部也保持在顶部对齐。
在父 div 上设置 display:table-row 并在每个子 div 上设置 display:table-cell 怎么样？

标签： javascript html css

【解决方案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;
}

【讨论】：

这几乎可以工作，它正好相反 - 有文本的大右框不应该改变高度，除非它自己包含文本换行，而小左框不应该有一个设定的高度。
对不起...我不明白。除了你给的那些，我没有设定任何高度。无论如何，这只是一个起点。
我希望小盒子的高度是动态的，并且增加/减少以与大盒子的底部对齐。小框的高度目前在 HTML 中固定为 200px。

【解决方案2】：

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

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

如果您需要更多可扩展性，您也可以使用 jQuery 插件。

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

【讨论】：