最小寬度的3列布局（固定，流體，固定）

Question

我已經搜索了網頁，但似乎無法找到一個乾淨，簡單，所有瀏覽器友好的3列布局。

我期待有3列的佈局，左列200px固定，右列200px固定與中心列剩餘寬度，但最小寬度600px。所以整體最小寬度是200px + 600px + 200px = 1000px。

我看到很多例子，當調整瀏覽器的大小時，這些列看起來互相重疊，這是一個問題。

感謝

Answer 1

如果源訂單並不重要，那麼一個簡單的解決方案是使用顯示錶/表格單元格。使包裝100％寬度與所需的最小寬度。指定固定寬度列的寬度。使用表格顯示時，所有列將具有相同的高度。

#wrapper { 
 
    display: table; 
 
    width: 100%; 
 
    min-width: 1000px; 
 
    min-height: 400px; 
 
} 
 
#column-1 { 
 
    display: table-cell; 
 
    background: #DDF; 
 
    width: 200px; 
 
} 
 
#column-2 { 
 
    display: table-cell; 
 
    background: #EEE; 
 
} 
 
#column-3 { 
 
    display: table-cell; 
 
    background: #DDF; 
 
    width: 200px; 
 
}

<div id="wrapper"> 
 
    <div id="column-1">= 200px</div> 
 
    <div id="column-2">&gt;= 600px</div> 
 
    <div id="column-3">= 200px</div> 
 
</div>

Answer 2

嘗試在屏幕分辨率< 1000像素使用常量值媒體查詢。這可以幫助你。