html - 如何在流体容器元素内设置 div 宽度？

Question

我有一个容器元素:

div#container {
  width:100%;
  height: 20px;
  overflow:hidden"
}

在这个容器中，我有三个子 div，它们在左侧 处 float 。第一个和第三个子 div 有 width = 100px

如何设置第二个 div 的样式以占用剩余空间？

nb: 只有 css，没有 javascript。

Answer 1

如果第三个div可以改成float:right，我推荐你这样的布局:

div#container { width:100%; height: 20px; overflow:hidden;display:table; }
div#div1 { float:left; width:100px; display:table-cell; }
div#div2 { margin-left:100px; margin-right:100px; width:100%; display:table-cell; }
div#div3 { float:right; width:100px; display:table-cell; }