CSS三列布局，有左列流體，居中和固定中間列，固定右列

我有一段時間把我的頭圍繞着這個。我在這裏要做的是創建一個有點扭曲的直線式3列布局。我希望中心的「內容」欄永遠集中在屏幕上。右側的列是固定寬度，但我想讓左側的列流暢。其目的是爲了適應980像素的寬屏幕，位於左列的徽標將不會阻擋徽標的任何部分，但我還希望最大分辨率爲450px。CSS三列布局，有左列流體，居中和固定中間列，固定右列

--------------------------------------------------------------------------------- 
| Fluid, image  |          |     | 
| inside resizes |   Content column    | Nav column   | 
| max-width: 450px |   fixed width: 600px   | fixed width: 200px | 
| min-width: 180px |          |     | 
---------------------------------------------------------------------------------

這是我已經能夠完成的最好的，但它是一個非常複雜的方法與負邊距。隨着左列的完成方式，我不能保持「內容」列實際居中，但。

有什麼建議嗎？謝謝！

jfiddle

來源

2014-01-08 andrewgcross

無法讓jsfiddle在我的ipad上正常工作（grr）butt基本配方是完全失去邊距，將左列浮動到左側，將右列右浮動並給中間欄'margin-left：auto; margin-right：auto'。只要中間列是固定寬度，它應該自動居中。 http://webdesign.about.com/od/css/ht/htcsscenterfix.htm給出了居中元素的低調。您可能需要在HTML中對這三個div的順序進行洗牌。 – yochannah

看看這個問題：http://stackoverflow.com/questions/26001765/research-on-creating-grids-that-combine-percentage-and-static-e-g-pixel-value – luke

如果使用 display:table

，您可以訪問到餐桌布局的特性，而無需使用一個。

應該那麼容易得到的東西接近你正在尋找： http://jsfiddle.net/v5yP3/4/

html { 
    background: yellow; 
} 
#wrapper { 
    margin: 0 auto; 
    max-width: 1250px; 
    min-width: 980px; 
    background: #fff; 
    display:table; 
} 
#leftcolumn, #rightcolumn { 
    display:table-cell; 
    width:450px; 
} 
#rightcolumn { 
    width:200px; 
} 
#contentcolumn { 
    display:table-cell; 
    width: 600px; 
    background: blue; 
} 
img { 
    width:180px; 
    min-width: 100%; 
    vertical-align:top; 
}

編輯：固定權科拉姆寬度

來源

2014-01-08 22:59:27

如果你不完全關注IE9 compatibility，我強烈建議使用flexbox來顯示您的列。

HTML：

<div class='container'> 
    <div class='column left'>left</div> 
    <div class='column middle'>middle</div> 
    <div class='column right'>right</div> 
</div>

CSS（樣式刪除）：

body, 
html { 
    height: 100%;  
} 

.container { 
    display: flex; 
    height: 100%; 
    width: 100%; 
} 

.left { 
    min-width: 180px; 
    max-width: 450px; 
    width: 100%; 
} 

.middle { 
    flex-shrink: 0; 
    width: 600px; 
} 

.right { 
    flex-shrink: 0; 
    width: 200px; 
}

的jsfiddle（與造型）：http://jsfiddle.net/379MA/

如果你正在尋找了解更多關於Flexbox的，我建議關於css-tricks的指南：

flexbox的全面指南可以是fou nd here：http://css-tricks.com/snippets/css/a-guide-to-flexbox/

來源

2014-01-08 23:18:46 mmmeff

CSS三列布局，有左列流體，居中和固定中間列，固定右列

回答

相關問題