Css 三列布局。。。左侧（固定px），中间（50%），右侧（50%）

我希望左边的列是40px。我希望中心列为剩余视口的50%，右列为剩余视口的其他50%

它应该是这样的：

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

这里给出的解决方案（）不适用于我的案例，因为在移动设备上，中心柱可能会变得过于折叠

---

谢谢

我想这可能对你有用：

基本上，诀窍是浮动LEFTCOLUMN，并将CENTERCOLUMN和RIGHTCOLUMN用

溢出：隐藏

包装器包装起来，这样做行吗

演示：

如您所见，左边是绝对值，“剩余”是一个包含两个50%浮动子项的块div。适用于任何宽度>~40px

代码：

左
剩余内容
内容权
.左{
位置：绝对位置；
排名：0；
左：0；
宽度：40px；
背景色：#ddd；
}
.内容{
左边距：40px；
}
.content.剩下的内容{
浮动：左；
宽度：50%；
明确：无；
背景色：#fdd；
}
.内容.内容权{
浮动：对；
宽度：50%；
明确：无；
背景色：#ddf；
}

使用

显示：表格和
显示：表格单元格。无需与
float:x斗争

HTML:

实时示例：
此解决方案将不起作用，因为您将左类绝对定位为0,0，这意味着任何内容都不能超过该div。如果由于#container>*声明，第二个或第三个div中存在span标记（例如），则此解决方案将不起作用。我尝试将表格单元格手动应用于第二个和第三个单元格，但它并没有正确对齐。虽然，我应该提到。。。它看起来确实是最干净的CSS。我先测试了你的解决方案：）是的。这个解决方案是现成的。谢谢你的帮助，肖恩。做得好。
<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;
}

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

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