CSS 3列布局問題

我目前正在處理3列布局時遇到一些麻煩。我可以創建佈局，但有一些我需要解決的問題。CSS 3列布局問題

HTML

<div id="container"> 
    <div class="col1"> 
    </div> 
    <div class="col2"> 
    </div> 
    <div class="col3"> 
    </div> 
</div>

CSS

.col1 
{ 
    float: left; 
} 
.col2 
{ 
    float: left; 
} 
.col3 
{ 
    float: right; 
} 
.col1, 
.col3 
{ 
    width: 100px; 
}

我的第一個問題是，列1和3固定寬度，我需要中間柱擴大，以填補之間的差距他們兩個人。我不能爲我的生活弄清楚如何做到這一點。我可以使用絕對定位來實現這一目標，但這會很好地引導我進入下一個問題......

當瀏覽器調整大小時，我需要將列很好地包裹在彼此之下。

任何幫助或指針將不勝感激。理想情況下，我想盡可能使用盡可能少的黑客和JavaScript來完成此操作。

這裏是我開始玩弄小提琴：http://jsfiddle.net/BCJ6C/6/

乾杯！

2011-07-14 Steve Day

您可以使用百分比寬度嗎？讓col1和col3 10％然後col2 80％？當屏幕重新調整大小時，他們絕對必須在另一個下方對齊，並且您希望col2在這種情況下看起來像什麼？ – Dave

嗨戴夫，不幸的是我不能使用百分比。看到我對薩爾曼A的回答應該如何工作。 –

@Steve Day - 黃色方塊如何工作，它們總是有固定的高度？那麼黃色框中的內容呢？它會改變嗎？ – Joonas

只是不浮動中間列。不好的部分是，您必須將它移動到源順序中第1列和第3列以下。希望這不是問題。

2011-07-14 11:51:52

謝謝，但第2欄不包裹在你的小提琴。我需要每一列來包裝。當瀏覽器窗口中沒有足夠的空間用於所有列時，理想情況下，它們將逐個包裝。所以首先，第3列會將兩個留在頂部，然後當窗口變小時，column2會將它們全部放在一行中。那有意義嗎？ –

反對，因爲它不包裹中間列 –

@Steve：認爲我很興奮，只回答了一半的問題。如果我能想出更好的答案，將會更新。 –

編輯：改變了網址。無意中發佈了第一個舊版本

2011-07-14 21:26:15 Joonas

謝謝，但我需要在瀏覽器窗口調整大小時包裝列。 –

@Steve Day - 你是什麼意思的包裝？ – Joonas

當瀏覽器窗口變小時，我需要將列包裝在彼此之下，直到它們位於一條垂直線中。在我原來的文章中有小提琴和由此產生的答案，其中的例子與我所需要的很接近。 –

回答