我已經搜索了網頁,但似乎無法找到一個乾淨,簡單,所有瀏覽器友好的3列布局。最小寬度的3列布局(固定,流體,固定)
我期待有3列的佈局,左列200px固定,右列200px固定與中心列剩餘寬度,但最小寬度600px。所以整體最小寬度是200px + 600px + 200px = 1000px。
我看到很多例子,當調整瀏覽器的大小時,這些列看起來互相重疊,這是一個問題。
感謝
我已經搜索了網頁,但似乎無法找到一個乾淨,簡單,所有瀏覽器友好的3列布局。最小寬度的3列布局(固定,流體,固定)
我期待有3列的佈局,左列200px固定,右列200px固定與中心列剩餘寬度,但最小寬度600px。所以整體最小寬度是200px + 600px + 200px = 1000px。
我看到很多例子,當調整瀏覽器的大小時,這些列看起來互相重疊,這是一個問題。
感謝
如果源訂單並不重要,那麼一個簡單的解決方案是使用顯示錶/表格單元格。使包裝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">>= 600px</div>
<div id="column-3">= 200px</div>
</div>
嘗試在屏幕分辨率< 1000像素使用常量值媒體查詢。這可以幫助你。
不知道你的「源序」的意思,但這個偉大的工程,很簡單,乾淨。謝謝 – MrJamesBond 2014-10-26 22:05:57