Question

好的，这是我的问题，

我需要在一行中有四个DIV个。前三个是float:left，第四个是float:right。容器具有指定的宽度。

我需要第三个div来填充从左侧浮动的第二个div到右侧浮动的第四个div的所有空间。

编辑： DIV＃1，＃2和＃4也有动态宽度......它们有一定的填充，内容定义了宽度。

Answer 1

为什么不把问题放在首位，并确定如何创建你想要的布局 - 在这种情况下，可能最简单的方法是：

Demo Fiddle

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 */
}

Answer 2

使用浮动元素的解决方案

以下是使用浮点数执行此操作的一种方法。

按如下方式排列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以防止浮动的子元素影响父元素之外的布局。

我在overflow: auto上添加了.p3，以便填充包含在包含的块中。

请参阅：http://jsfiddle.net/audetwebdesign/9G8rT/

<强>评论

此方法的一个缺点是内容的顺序已更改，即.p3在代码顺序中显示.p4。

在响应式设计中可能需要的另一个副作用是，当父容器宽度变小时，子元素将包裹在2行或更多行上。

如果您需要在HTML代码中保留内容顺序，那么CSS表格单元解决方案是一个很好的替代方案。

无论父容器的宽度如何，table-cell解决方案都会将子元素保留在一行中。

浮动元素解决方案的最后一个优点是它比CSS表格单元解决方案更向后兼容，但随着我们前进，这变得越来越少一个令人信服的论点。

浮动DIV宽度= 100％ - 另外两个浮动div的宽度

2 个答案:

Demo Fiddle