好的，这是我的问题，
我需要在一行中有四个DIVs。前三个是float:left，第四个是float:right。容器具有指定的宽度。
我需要第三个div 来填充从向左浮动的第二个div 到向右浮动的第四个div 的所有空间。
编辑： DIV #1、#2 和 #4 也具有动态宽度...它们具有一定的填充，并且内容定义了宽度。
【问题讨论】：
为什么不转过头来，确定如何创建您想要的布局——在这种情况下，最简单的方法可能是：
HTML
<div class='table'>
<div class='cell'>fit</div>
<div class='cell'>fit</div>
<div class='cell'>expand</div>
<div class='cell'>fit</div>
</div>
CSS
.table {
display:table;
width:100%; /* <-- will make the divs align across the full browser width */
height:50px;
}
.cell {
display:table-cell;
border:1px solid red;
width:1%; /* <-- will make 1, 2, 4 only fit their content */
}
.cell:nth-child(3) {
width:100%; /* <-- will make 3 expand to the remaining space */
}
【讨论】：
使用浮动元素的解决方案
这是使用浮点数的一种方法。
按如下方式排列您的 HTML：
<div class="panel-container">
<div class="panel p1">Panel 1 - and a word</div>
<div class="panel p2">Panel 2 - Done. </div>
<div class="panel p4">Panel 4 - End!</div>
<div class="panel p3">Panel 3</div>
</div>
并应用以下 CSS：
.panel-container {
width: 600px;
border: 1px dotted blue;
overflow: auto;
}
.panel {
background-color: lightgray;
padding: 5px;
}
.p1 {
float: left;
}
.p2 {
float: left;
}
.p3 {
background-color: tan;
overflow: auto;
}
.p4 {
float: right;
}
诀窍是将浮动元素（.p1、.p2..p4）放置在流入内容（.p3）之前。
在父容器上使用overflow: auto，以防止浮动的子元素影响父元素之外的布局。
我在.p3 上添加了overflow: auto，以便填充包含在包含块中。
参见小提琴：http://jsfiddle.net/audetwebdesign/9G8rT/
评论
这种方法的一个缺点是改变了内容的顺序，即.p3在代码顺序中出现在.p4之后。
在响应式设计中可能需要的另一个副作用是，随着父容器宽度变小，子元素将换行到 2 行或更多行。
如果您需要在 HTML 代码中保留内容顺序，CSS table-cell 解决方案是一个不错的选择。
表格单元解决方案将子元素保持在一行，而不管父容器的宽度。
浮动元素解决方案的最后一个优势是，它比 CSS 表格单元解决方案更向后兼容，但随着我们的发展，这变得越来越少 一个令人信服的论点。
【讨论】：