html - 使父对象的所有 float 子代与最高子代的高度相同

这就是我所拥有的。它可以正常工作，但不完全是我想要的行为。

#container {
  height:250px; /*I want this to be set to auto*/
}             /*and have each child the height as the tallest.*/
#container > * {
  height:inherit;
  border-right: rgb(82,82,82) 2px solid;
  float:left;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
.div1,.div2 {
  width: 8.66666%
}
.nav, .div3 {
  width: 41.66666%
}

<div id="container" class="clearfix">
  <div class="div1"></div>
  <nav class="nav"></nav>
  <div class="div2"></div>
  <div class="div3"></div>
</div>

如果我已经设置了容器的高度，这行得通，但是当我将其设置为自动或100％时，高度是不一样的。当我走到绝对位置时，一切似乎都崩溃了。这是可以理解的。我的设计基于浮标和可变宽度。有人有任何建议吗，或者我只是运气不好？

最佳答案

弹性盒

最新的东西（8/16）但是支持的是IE10 +（很少），大多数Safari实现（以及一些较旧的FF / Chrome版本）都需要供应商前缀。

.container {
  display: flex;
}
.container > * {
  border-right: rgb(82, 82, 82) 2px solid;
}
.div1,
.div2 {
  width: 8.66666%;
  background: pink;
}
.nav,
.div3 {
  width: 41.66666%;
  background: orange;
}
nav {
  height: 100px;
}

<div class="container">
  <div class="div1"></div>
  <nav class="nav"></nav>
  <div class="div2"></div>
  <div class="div3"></div>
</div>

CSS表

具有IE8支持，但要调整较大/较小设备的布局时灵活性较差。

.container {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.container > * {
  display: table-cell;
  border-right: rgb(82, 82, 82) 2px solid;
}
.div1,
.div2 {
  width: 8.66666%;
  background: pink;
}
.nav,
.div3 {
  width: 41.66666%;
  background: orange;
}
nav {
  height: 100px;
}

<div class="container">
  <div class="div1"></div>
  <nav class="nav"></nav>
  <div class="div2"></div>
  <div class="div3"></div>
</div>

关于html - 使父对象的所有 float 子代与最高子代的高度相同，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39154849/