html - 根据可用空间调整嵌套 div 的大小

Question

我有两个相邻的 div，一个向左浮动，一个向右浮动。

在左侧 float 的 div 中，我还有另外三个嵌套的 div。

我希望嵌套的 div 调整它们的宽度以占用右侧 float div 剩余的可用空间。

我怎样才能让这个奇迹发生？

请参阅此处的代码笔示例:http://codepen.io/bennygill/pen/bZkJyV

这是 HTML:

<div class="outer">
  <div class="inner-left">
    <div class="item">Image and text here. I want all three of these to sit next too each other. But their width should adjust too fill the available space next to the blue "inner-right" content.</div>
    <div class="item">Image and text here. I want all three of these to sit next too each other. But their width should adjust too fill the available space next to the blue "inner-right" content.</div>
    <div class="item">Image and text here. I want all three of these to sit next too each other. But their width should adjust too fill the available space next to the blue "inner-right" content</div>
  </div>
  <div class="inner-right">
    Some other divs and tables go in here. The width of this part will exapand based on the dynamic content it contains.
  </div>
</div>

这是 CSS:

/* Maximum width of container */
.outer {
  width: 1000px;
}

/* Floats div container to the left */
.inner-left {
  float: left;
  display: inline-block;
}

/* Floats div container to the right */
.inner-right {
  float: right;
  width: initial;
  display: inline-block;
  border: 5px solid blue;
}

/* ??? helpe me position these equally in available space ??? */
.item {
  width: 30%; /* This is wrong because they don't adjust to fill the space next to the blue "inner-right" content*/
  text-align: center;
  display: inline-block;
  border: 5px solid red;
}

Answer 1

这是表格的少数合法用例之一。它支持旧浏览器(flexbox 仅 IE10+)并且是完全动态的。

/* Maximum width of container */
.outer {
  width: 1000px;
  display:table;
}

/* Floats div container to the left */
.inner-left {
  vertical-align: -webkit-baseline-middle;
  display: table-cell;
}

/* Floats div container to the right */
.inner-right {
  width: initial;
  display: table-cell;
  border: 5px solid blue;
}

/* ??? helpe me position these equally in available space ??? */
.item {
  width: 30%; /* This is wrong because they don't adjust to fill the space next to the blue "inner-right" content*/
  text-align: center;
  display: inline-block;
  border: 5px solid red;
}

<div class="outer">
  <div class="inner-left">
    <div class="item">Image and text here. I want all three of these to sit next too each other. But their width should adjust too fill the available space next to the blue "inner-right" content.</div>
    <div class="item">Image and text here. I want all three of these to sit next too each other. But their width should adjust too fill the available space next to the blue "inner-right" content.</div>
    <div class="item">Image and text here. I want all three of these to sit next too each other. But their width should adjust too fill the available space next to the blue "inner-right" content</div>
  </div>
  <div class="inner-right">
    Some other divs and tables go in here. The width of this part will exapand based on the dynamic content it contains.
  </div>
</div>