三欄式布局…左（固定像素），中心（50％），右（50％）

Question

我希望左列為40px。 我希望中心列是剩余視口的50％，我希望右邊列是剩余視口的其他50％。

它看起來應該像這樣：

[LEFTCOLUMN][...CENTER COLUMN...][...RIGHT COLUMN....]
[...40px...][........50%........][........50%........]

這里提出的解決方案（ 鏈接 ）不適用於我的情況，因為中心列在移動設備上可能會變得過於折疊。

謝謝！

Answer 1

我認為這可能對您有用：

http://jsfiddle.net/KR9zj/

本質上，訣竅是使LEFTCOLUMN浮動，並將CENTERCOLUMN和RIGHTCOLUMN都包裝在帶有wrapper的包裝中overflow: hidden 。

Answer 2

使用display:table; 並display:table-cell; 。 無需與float:x;斗爭float:x; 。

HTML：

<div id='container'>
    <div id='first'>a</div>
    <div id='second' class='fifty'>b</div>
    <div id='third' class='fifty'>c</div>
</div>​

CSS：

#container { display:table; width:100%; }
#container > * { display:table-cell; }
#first { width:40px; min-width:40px; }
#container .fifty { width:50%; }

實時示例： http ： //jsfiddle.net/j25wK/

Answer 3

這樣行嗎？

演示 ： http : //jsfiddle.net/BVhCZ/

如您所見，左邊是絕對的，“剩余”是一個塊div，其中包含兩個50％浮動的子代。 應該適用於任何大於40px的寬度

碼：

<div class="left">LEFT</div>
<div class="content">
    <div class="content-left">CONTENT LEFT</div>
    <div class="content-right">CONTENT RIGHT</div>
</div>

.left {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;    
    background-color: #ddd;
}
.content {
    margin-left: 40px;    
}
.content .content-left {
    float: left;
    width: 50%;
    clear: none;
    background-color: #fdd;
}
.content .content-right {
    float: right;
    width: 50%;
    clear: none;   
    background-color: #ddf;
}