Question

在下面的代码中，我想使用'y'的div来匹配div的高度和3'x'。

<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>

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

Answer 1

我在A List Apart看到了一个解决方案（我认为），你给两个内部列一个巨大的底部填充，但同样巨大的值作为负边距。只要列不超过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>

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

Answer 2

您有三种选择。

使内部div与外部div一样高。这不太难;
将内部div放在另一个div中并尝试使用高度和/或最小高度100％使它们与包含div一样高但是我怀疑这不会起作用，因为包含div可能会伸展到高度其包含div或页面。不过可能值得一试;或者，最简单的
使用表格。这个问题对于表来说是微不足道的。这是pure CSS deficiencies的一个很好的例子。

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

有些人可能会说使用display：table-cell但对此的支持相当有限（在IE上）。

Answer 3

如果你不喜欢jQuery，你可以使用EqualHeight，它应该做你想做的事情

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

3 个答案: