Css 如何使浮动内div与最高div的高度相同

在下面的代码中，我希望带“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>

x
x
x
Y

---

需要注意的是，内部div是浮动的。

您有三个选项

使内部div和外部div一样高。这并不难

将内部div放在另一个div中，并尝试使用height和/或minheight 100%将它们设置为与包含div一样高，尽管我怀疑这不会起作用，因为包含div可能会延伸到其包含div或页面的高度。不过，也许值得一试；或者，最简单的

使用表格。对于表来说，这个问题无关紧要。这是一个很好的例子

没有简单的方法可以让两个div“共享”高度。像100%高度这样的技巧在需要使用的CSS属性和正在使用的边框方面都存在跨浏览器问题。边框通常是对所使用的任何高度的补充

---

有人可能会说使用display:table cell，但对它的支持相当有限（在IE上）。

如果你不反对jQuery，你可以使用，它应该可以做你想做的事情。

我在一个分开的列表中看到了一个解决方案（我想），在其中给两个内部列一个巨大的底部填充，但与负边距相同的巨大值。只要色谱柱高度不超过32000px（这是很少见的），这一切都可以工作。比如：

.col {
  float: left;
  padding-bottom: 32000px;
  margin-bottom: -32000px;
}

…其中“col”是任何列的类名。然后，您可以使用一个单独的类来设置各个列的样式

<div class="col xxx">x<br />x<br />x</div>
<div class="col yyy">y</div>

x
x
x
Y

---

另一种选择是在外部div上使用背景图像，包括边框等。这种方法显然意味着更改列（宽度、颜色）有点困难设置完成后。

虽然我不喜欢使用Javascript进行此类操作，但这是合适的，因为项目已经在使用JQuery。在选择答案时，这可能有效，但在JQuery的更高版本中根本不起作用。a）

$.browser.msie

不再存在（更改为

$.support.boxModel

），b）它设置了一个最小高度，如果您在CSS中已经设置了一个更高的最小高度，该设置将失败（我不知道这是如何发生的）。即使这两件事都解决了，它也没有正确设置高度。-1对于表-这是不可访问的，因为您正在使用语义标记进行纯粹的视觉攻击。屏幕阅读器用户会非常不安。当使用媒体查询时，表格不是一个好的选择。如果我有一个4x3的网格，我想缩小到3x4，然后再缩小到2x6，那么这些表将不起作用。也许你可以使用这个技巧？在我在容器上设置

overflow:hidden

后，这对我来说很有效（即7-9&FF）。非常好，但不太好！如果我将边框或圆角应用于内部div，则会在底部截断。