CSS：如何让三个DIV在同一行，中间一个DIV占据剩余的空间？

Question

CSS：如何让三个DIV在同一行，中间一个DIV占据剩余的空间？

5

我正在制作一个工具栏，我希望下面链接的黄色部分占据整个剩余空间（白色部分）： http://jsfiddle.net/MWjGH/1/

<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;
}

编辑：左侧和右侧的内容是动态的，它们可能会改变，因此我不想在它们上面设置宽度。

- plus-

中间不是<div>，而是<span>。 - Dipesh Parmar

左边和右边的宽度是多少？ - Pete

@Pete 它是动态的，它可以改变。 - plus-

值得注意的是，浮动元素被视为块显示元素。因此，在同一元素上设置浮动和显示属性是毫无意义的，除非显示设置为none。 - James Donnelly

5个回答

6

将中间的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/

- Twon-ha

修复并添加了可工作的Fiddle。对于仓促的第一次尝试表示抱歉。错过了inline-block。 - Twon-ha

完美的答案，我就知道一定是那么简单的事情。 - plus-

@plus-：你意识到如果中间内容比侧边栏更高，它将会超出边界吗？这实际上是你想要的吗？http://jsfiddle.net/hLmj7/2/ - James Donnelly

@JamesDonnelly 是的，没问题。 - plus-

@plus-：我明白了，你应该在问题中说明这一点。这个答案并不是非常适合这个问题。 - James Donnelly

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示例。

有了这个，您就可以在不必不断更改中间元素的宽度的情况下，为外部列添加min-width。

应用了min-width的JSFiddle示例。

- James Donnelly

好的，这实际上是我需要的答案：请参见 http://jsfiddle.net/MWjGH/14/，其中添加了边框，而先前接受的答案则为 http://jsfiddle.net/hLmj7/3/。 - plus-

你的左右两个div将会随着中间的div一起增长，反之亦然：http://jsfiddle.net/MWjGH/16/ - Twon-ha

如果这不是期望的效果，那么xpy的回答可能更相关。 - James Donnelly

@JamesDonelly 那就是确切的。 - plus-

0

我会将您的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;
}

考虑在包装 div 中添加 clearfix，因为内部的 div 是浮动的 :)

- haejeong87

中间元素的背景比较复杂，包含了边框等内容，无法应用于包装器。 - plus-

是的，在这种情况下，display: table-cell;或者table/tr/td是可行的方法！ - haejeong87

0

尝试这个：

不要将最后一个 div 右对齐

使所有容器 float:left

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

working fiddle

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

为每个容器提供 width:auto，但请注意，

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

请参见 fiddle

- Manish Mishra

我不想强制宽度，左右内容可能会改变。 - plus-

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- xpy · Accepted Answer

我不知道这是否适合你，因为有一点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;
}

演示：http://jsfiddle.net/pavloschris/MWjGH/12/