CSS：半流體中心的三列布局

我試圖創建一個基本的3列布局。基本上中心柱應該是流體的，因爲它應該擴展以消耗左側和右側柱未使用的任何空間。但是，它也需要具有大約378個像素的固定min-width。CSS：半流體中心的三列布局

有許多選項用於創建具有完全流體中心列的3列布局，使用浮點數爲with或without。然而，到目前爲止我遇到的每個預先包裝的解決方案（以及我自己試過的解決方案）的問題是，隨着頁面寬度的減小，一旦頁面出現頁面右列就會出現在中間列的頂部太狹窄了。

如果可能的話，我想避免這種情況。理想情況下，一旦min-width被擊中，右列應該保持在原來的位置，並且頁面應該水平滾動。所以我們的目標是：

3列布局，有一個流體中心列和固定寬度左右列。
具有固定最小寬度的中央列，以防止它變得太小。
當窗口變得太小時，右列指向最小寬度並且不會踐踏，漂浮或包裹在中心列的下方。

純粹的CSS解決方案是首選，但如果有一個簡單的方法來使用一些聰明的JavaScript來做到這一點，我也不反對這種方法。

來源

2012-11-27 aroth

嗯...有確切的寬度左右立柱，並在中心列最小寬度相當於具有的'民width'（左+右+ mincenter）整個三列結構。 –

@UlrichSchwarz - 我嘗試了這一切，直到當我意識到中心div沒有擴大以填充頁面上未使用的空間時，它才運行良好。試圖解決這個問題導致了各種問題，但這可能只是因爲我在這個過程的某個地方犯了一個愚蠢的錯誤。 – aroth

爲什麼不只是讓所有三列的百分位數寬度而不是兩個固定的50px列外？ – FoolishSeth

爲此您可以使用顯示：表屬性。像這樣寫：

#wrapper{ 
    display:table; 
    width:100%; 
    height:100%; 
} 
#wrapper > div{ 
    display:table-cell; 
    height:100%; 
} 

#left { 
    width:50px; 
    min-width:50px; 
    background-color:pink; 
} 

#center { 
    background-color:green; 
    min-width:200px; 
} 

#right { 
    width:50px; 
    min-width:50px; 
    background-color:red; 
} 

body, html{ 
    width:100%; 
    height:100%; 

}

入住這http://jsfiddle.net/ykAPM/137/

來源

2012-11-27 07:06:56 sandeep

這有效，除了它在我的日曆小部件中引入了[非常討厭的副作用]（http://terra.suncoastpc.com.au/cal.png）。這只是一個標準的jQuery.fullcalendar日曆。它位於左側欄內，如果這有所作爲。有任何想法嗎？ – aroth

CSS：半流體中心的三列布局

回答

相關問題