三列布局..左(固定像素)、居中 (50%)、右 (50%)

Question

我希望左列是40px。我希望中心列是剩余视口的 50%，我希望右列是剩余视口的另外 50%。

它应该看起来像这样：

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

此处提供的解决方案（链接）不适用于我的情况，因为中心列在移动设备上可能会过于折叠。

谢谢！

Answer 1

我认为这可能对你有用：

http://jsfiddle.net/KR9zj/

从本质上讲，诀窍是浮动左列，并将中心列和右列都包装在带有overflow: hidden的包装器中。

Answer 2

使用 display:table; 和 display:table-cell; 。无需与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/

如您所见，左侧是绝对的，"剩余"是一个包含两个 50% 浮动子项的块div。应该适用于任何宽度>~ 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;
}