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

StackOverflow https://stackoverflow.com/questions/873781

  •  22-08-2019
  •  | 
  •  

题

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

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

有帮助吗？

解决方案

如果你没有不利的jQuery的地方，你可以使用 EqualHeight ，它应该做你想做的。

其他提示

我在 A List Apart 看到了一个解决方案（我认为），您可以为两个内部列提供巨大的底部填充，但与负边距具有相同的巨大值。只要列的高度不超过 32000 像素，这一切都有效，这种情况很少见。就像是：

.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 上使用背景图像，包​​括边框等。这种方法显然意味着设置后更改列（宽度、颜色）会更加困难。

你有三个选择。

  1. 使内部 div 与外部 div 一样高。这并不太难；
  2. 将内部 div 放入另一个 div 中，并尝试使用 height 和/或 min-height 100% 使它们与包含的 div 一样高，尽管我怀疑这不起作用，因为包含的 div 可能会拉伸到其包含的 div 的高度div 或页面。不过，这可能值得一试；或者，最简单的
  3. 使用表格。这个问题对于表来说是微不足道的。这是一个很好的例子 纯 CSS 的缺陷.

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

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top