使父对象的所有浮动子级与最高子级

Question

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

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

如果我已设置容器的高度，这可以正常工作，但是当我将其设置为auto或100％时，高度不同。当我去和绝对定位混乱时，一切似乎都崩溃了。这是可以理解的。我的设计基于浮动和可变宽度。有没有人有任何建议，或者我只是运气不好？

Answer 1

Flexbox的

最新的东西（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>