CSS：在同一行上有3个div，占用剩余空间

Question

我正在构建一个工具栏，我希望以下示例中的黄色部分留空（白色）：

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

编辑：内容左，右是动态的，它可以改变，所以我不希望设置宽度他们

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> 

然后，让他们留在block不更改任何display属性（用于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的内部是浮动:)