CSS：在同一行上有3个div，中间的一个占用剩余空间 [英] CSS: Having 3 div on the same line with the middle one taking the remaining space

问题描述

我正在建立一个工具栏，我想在下面的例子中的黄色部分取整个空格（白色）：

I'm building a toolbar, I'd like the yellow part in the following example to take the whole space left (in white):

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

编辑：左侧和右侧的内容是动态的，更改，因此我不想在其上设置宽度。

the content of left and right is dynamic, it can change, so I don't want to set width on them

推荐答案

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

I don't know if that suits you because of a slight HTML change:

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

但我相信这是你想要的，

But I believe it is what you want,

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/

这篇关于CSS：在同一行上有3个div，中间的一个占用剩余空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！