Question

我正在构建一个工具栏，我想在下面的示例中使用黄色部分来保留整个空间（白色）：

<div class="left"> Some content </div>
<span class="middle"> This should fill the space left </span>
<div class="right"> Some other content </div>

用css：

.left {
    float: left;
    background-color: #ddd;
    display: inline-block;
}
.middle {
    background-color: yellow;
    display: inline-block;
}
.right {
    float: right;
    background-color: #ddd;
    display: inline-block;
}

编辑：左右内容是动态的，可以更改，所以我不想设置宽度

Answer 1

我不知道这是否适合你，因为有轻微的HTML更改：

<div class="left"> Some content </div>
<div class="right"> Some other content </div>
<span class="middle"> This should fill the space </span>

但我相信这就是你想要的，

CSS：

.left {
    float: left;
    background-color: #ddd;
}
.middle {
    background-color: yellow;
    display: block;
    overflow:hidden;
}
.right {
    float: right;
    background-color: #ddd;
}

DEMO：http://jsfiddle.net/pavloschris/MWjGH/12/

Answer 2

在浮动的div之后放置中间div：

<div class="left"> Some content </div>
<div class="right"> Some other content </div>
<div class="middle"> This should fill the space left </div>

然后，请勿更改任何display属性，以便它们保持block（div的默认设置）

.left {
    float: left;
    background-color: #ddd;
}
.middle {
    background-color: yellow;
}
.right {
    float: right;
    background-color: #ddd;
}

小提琴：http://jsfiddle.net/hLmj7/

Answer 3

如果您对两个边列没有固定宽度，则可以始终display:table-cell。

.left {
    background-color: #ddd;
    display: table-cell;
}
.middle {
    background-color: yellow;
    display: table-cell;
    width:100%;
}
.right {
    background-color: #ddd;
    display: table-cell;
}

JSFiddle example

通过这种方式，您可以将min-width添加到外部列，而无需不断更改中间元素的宽度。

JSFiddle example with min-width applied

Answer 4

试试这个：

不要对齐你的最后一个div

制作所有容器float:left

并为每个容器提供百分比宽度，以便它们的总和应为100％;

working fiddle

如果您不想强制执行静态宽度，请执行以下操作：

为每个容器添加width:auto，但会收到通知，

如果每个容器的宽度总和超过父容器（在您的情况下为主体）容器的总和，则会发生换行， div会滑到下一行。

请参阅此fiddle

Answer 5

我会将div包装在一个包装器中，并将背景颜色分配给包装器div 然后，您根本不需要指定宽度。 jsfiddle

HTML：

<div class="toolbar">
    <div class="left"> Some content </div>
    <div class="middle"> This should fill the space left </div>
    <div class="right"> Some other content </div>
</div>

CSS：

.toolbar {
    background-color: yellow;    
}
.left {
    float: left;
    background-color: #ddd;
    display: inline-block;
}
.middle {
    display: inline-block;
}
.right {
    float: right;
    background-color: #ddd;
    display: inline-block;
}

考虑将clearfix添加到包装器div，因为里面的div是浮动的：）

CSS：在同一条线上有3个div，中间的一个占用剩余的空间

5 个答案: