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的內部是浮動:)