灌裝用3周的div

我有以下的情況的屏幕：灌裝用3周的div

<div id="container"> 
    <div id="div1"></div> 
    <div id="div2"></div> 
    <div id="div3"></div> 
</div>

div1和div3具有100px一個固定的寬度和100%的高度，div3還具有100%的高度。我想要的是div1向左浮動，div3向右浮動，div2應該留下它們之間的剩餘空間。我似乎無法得到它的工作。

任何幫助？

來源

2012-03-23 vincent

'div2'是否會環繞'div1'？ – 2012-03-23 13:34:34

您正在尋找3列布局？ – Garvin 2012-03-23 13:36:21

3列布局的確是我要找的，但如果我有一個可以說1440px寬的屏幕，左邊的div是100px，右邊的div是100px，那麼中間div應該佔據它之間的所有空間。在這種情況下，1240px – vincent 2012-03-23 13:42:27

這樣寫：

CSS：

#div1{ 
    float:left; 
    background:red; 
    width:100px; 
} 
#div3{ 
    float:right; 
    background:green; 
    width:100px; 
} 
#div2{ 
    overflow:hidden; 
    background:blue; 
}

HTML

<div id="div1">1</div> 
<div id="div3">3</div> 
<div id="div2">2</div>

入住這http://jsfiddle.net/D8836/

修訂

如果你想高度相等，那麼你可以使用display:table屬性用於此。勾選此

http://jsfiddle.net/D8836/11/

來源

2012-03-23 13:40:30 sandeep

與此問題是，列不會是相同的高度：[更新的小提琴]（http://jsfiddle.net/TheWaxMann/D8836/9/） – Andrew 2012-03-23 13:52:57

@ TheWaxMann檢查我更新的小提琴 – sandeep 2012-03-23 13:58:48

@ sandeep的問題是，三個div的高度必須是100％，這似乎並不工作 – vincent 2012-03-23 14:03:32

這一個不需要你改變你的div的順序，但確實需要CSS3（柔性盒）。 http://jsfiddle.net/pPEmZ/

來源

2012-03-23 13:53:25 mikevoermans

灌裝用3周的div

回答

相關問題