Html 如何使浮动内部 div 与最高 div 高度相同
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/873781/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make floating inner divs the same height as the highest div
提问by Jase Whatson
In the following code I would like the div with 'y' to match the height of the div with the 3 'x's.
在下面的代码中，我希望带有 'y' 的 div 与带有 3 个 'x' 的 div 的高度相匹配。
<div style="border: 0px solid red; margin: 0px 0px 5px; overflow: hidden;">
<div style="border: 1px solid rgb(129, 11, 0); margin: 0px; padding: 5px; background-color: rgb(30, 23, 22); width: 312px; float: left;">
x<br/>x<br/>x
</div>
<div style="border: 1px solid rgb(129, 11, 0); margin: 0px; padding: 5px; width: 312px; background-color: rgb(30, 23, 22); float: right;">
y
</div>
Things to note are the inner divs are floating.
需要注意的是内部 div 是浮动的。
采纳答案by Dan F
If you're not adverse to a spot of jQuery, you can use EqualHeight, it should do what you want
如果你不反对 jQuery，你可以使用EqualHeight，它应该做你想做的
回答by DisgruntledGoat
There was a solution I saw at A List Apart (I think), where you give the two inner columns a huge bottom padding, but the same huge value as a negative margin. This all works as long as the column is not more than 32000px high, which is rare. Something like:
我在 A List Apart 看到了一个解决方案（我认为），在那里你给两个内列一个巨大的底部填充，但与负边距相同的巨大价值。只要列的高度不超过 32000px，这一切都有效，这种情况很少见。就像是：
.col {
float: left;
padding-bottom: 32000px;
margin-bottom: -32000px;
}
...where "col" is the class name for any column. You can then style individual columns however you like with a separate class.
...其中“col”是任何列的类名。然后，您可以使用单独的类随意设置单个列的样式。
<div class="col xxx">x<br />x<br />x</div>
<div class="col yyy">y</div>
Another option is to use a background image on the outer div, including your borders etc. This approach obviously means it's a little more difficult to changes the columns (widths, colors) once set up.
另一种选择是在外部 div 上使用背景图像，包括您的边框等。这种方法显然意味着一旦设置就更难更改列（宽度、颜色）。
回答by cletus
You have three options.
你有三个选择。
- Make the inner divs both as high as the outer div. This isn't too hard;
- Put the inner divs inside another div and try and use height and/or min-height 100% to make them as high as the containing div although I suspect this won't work as the containing div will probably stretch to the height of its containing div or the page. It might be worth a shot though; or, easiest of all
- Use tables. This problem is trivial with tables. It's a good example of pure CSS deficiencies.
- 使内部 div 与外部 div 一样高。这并不太难；
- 将内部 div 放入另一个 div 并尝试使用 height 和/或 min-height 100% 使它们与包含的 div 一样高，尽管我怀疑这不起作用，因为包含的 div 可能会拉伸到其包含的高度div 或页面。不过，这可能值得一试。或者，最简单的
- 使用表格。这个问题对于表格来说是微不足道的。这是纯 CSS 缺陷的一个很好的例子。
There is no simple way to two divs "share" height. Tricks like 100% height have cross-browser issues both in terms of the CSS attributes you need to use and with borders, which you are using. Borders are typically in addition to any height that you use.
没有简单的方法可以让两个 div“共享”高度。像 100% 高度这样的技巧在您需要使用的 CSS 属性和您正在使用的边框方面都存在跨浏览器问题。边框通常是您使用的任何高度的补充。
Some might say use display: table-cell but support for that is rather limited (on IE).
有人可能会说使用 display: table-cell 但对此的支持相当有限（在 IE 上）。
