如何創建3列流體固定流體佈局？

我正在尋找一個3欄的CSS佈局，在中部1個固定部和2流體側邊欄圍繞它：如何創建3列流體固定流體佈局？

http://www.uploadup.com/di-UEFI.png

中間有250像素的寬度（例如）和側欄有（至少）150px寬度。如果瀏覽器寬度超過550像素（250 + 300），側邊欄應該有更長的寬度。（和中間始終是250px）

什麼是CSS可以做到這一點？兼容所有瀏覽器。

注：我看到this page，但我不知道如何去改變它爲我的心願

來源

2011-10-08 mrdaliri

我把它「所有的瀏覽器」包括IE7。它是否也包含IE6？ – thirtydot

是的，但我可以使用另一個CSS文件ie6 – mrdaliri

我很少說這個，但你真的應該學習CSS而不是讓人們爲你做這個。原因是，你不會理解如何在需要時修改CSS。如果你花時間去學習CSS的話，CSS將會得到回報。 –

你可以嘗試使用inline-block S表示它。它們很少被使用，但有時它們對佈局非常有用。

所以，看看這個：http://jsfiddle.net/kizu/UUzE9/ - 與inline-block s你可以創建任何數量的固定和流體列的佈局。算法：

首先，您將填充等於所有固定列的總和包裝。在你的情況 - 250px。
然後，您將min-width添加到等於所有流體列的最小寬度之和的包裝。
然後，您將white-space: nowrap添加到包裝，所以列不會跳轉。
然後只需添加所需的所有列。

如果您需要IE7和支持較小的，也有一些瞭解，除了常見的inline-block修復程序的其他事情：

您必須返回white-space: normal到塔內的兒童，或列贏不要停留在一條線上。
在IE中可能會出現一個幻影卷軸，也許有更好的方法來刪除它，但我只是在某些包裝上使用overflow: hidden。

享受:)

來源

2011-10-08 21:05:47 kizu

20分鐘前我不認爲這會在IE6中起作用，但它確實如此。這是完美的，如果列不必相同的高度。 – thirtydot

是的，但是很傷心，你需要額外的包裝和溢出：隱藏只是IE。 – kizu

我得到在divs之間顯示的白色邊框。我怎樣才能避免這種情況？（可以通過在小提琴中使用TidyUp再次運行代碼來進行復制） – purbsel

如果你不使用的現成模板，在那裏一個，
可以通過三種啓動div向左浮動，與寬的中間：250像素，並與 min-width: 150px
外面那些你可能想用<section>標籤來取代它，只是給它一個display: block

來源

2011-10-08 20:30:03

以及如何將它們放置在旁邊？寬度浮動和邊距？ – mrdaliri

從那裏開始，這取決於你。取決於您希望應用的實際視覺樣式。 –

我的問題在那裏（對不起英語不好）我不知道我該如何放置它們。和我應該使用什麼樣式。 – mrdaliri

爲了使THI在沒有JavaScript的情況下，在IE6/7中工作，最簡單的方法是使用table。

我知道，我知道。這不是那不好在這種情況下都考慮過了。

參見：http://jsfiddle.net/thirtydot/Q2Qxz/

經測試，在IE6/7 + Chrome和它只會在所有其他現代瀏覽器。

HTML：

<table id="container" cellspacing="0" cellpadding="0"> 
    <tr> 
     <td id="left">fluid</td> 
     <td id="mid">fixed</td> 
     <td id="right">fluid</td> 
    </tr> 
</table>

CSS：

html, body { 
    margin: 0; 
    padding: 0; 
    border: 0 
} 
#container { 
    border: 0; 
    table-layout: fixed; 
    width: 100% 
} 
#container td { 
    vertical-align: top 
} 
#mid { 
    width: 250px; 
    background: #ccc 
} 
#left { 
    background: #f0f 
} 
#right { 
    background: #f0f 
}

來源

2011-10-08 20:55:47 thirtydot

謝謝;但是'div'不可能？ – mrdaliri

我可以想到一種可以在IE7中工作的方式，但*不會*在IE6中使用「使用div's」。你想讓我發佈嗎？ – thirtydot

噢，還有一個問題：列的高度是否必須相等？ – thirtydot

如何創建3列流體固定流體佈局？

回答

相關問題