三列布局...左（固定像素）、中（50%）、右（50%）答案

【问题标题】：Three-Column Layout... left (fixed px), center (50%), right (50%)三列布局...左（固定像素）、中（50%）、右（50%）
【发布时间】：2012-10-06 01:30:09
【问题描述】：

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

它应该看起来像这样：

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

此处介绍的解决方案 (link) 不适用于我的情况，因为中心列在移动设备上可能变得过于折叠。

谢谢！

【问题讨论】：

标签： css layout html

【解决方案1】：

我认为这可能对你有用：

http://jsfiddle.net/KR9zj/

本质上，诀窍是浮动 LEFTCOLUMN，并使用 overflow: hidden 将 CENTERCOLUMN 和 RIGHTCOLUMN 包装在一个包装器中。

【讨论】：

是的。该解决方案开箱即用。谢谢你的帮助，肖恩。干得好。

【解决方案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/

【讨论】：

如果由于#container > * 声明而在第二个或第三个 div 中存在 span 标签（例如），则此解决方案将不起作用。我尝试手动将表格单元应用于第二个和第三个，但它没有正确排列。
虽然，我应该提一下......它看起来确实是最干净的 CSS 明智的。我先测试了你的解决方案:)

【解决方案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;
}

【讨论】：

此解决方案将不起作用，因为您将左类绝对定位到 0,0，这意味着没有任何东西可以超过该 div。