CSS 三栏布局，液体居中，无左边距！答案

【问题标题】：CSS three column layout, liquid center, no left-margin!CSS 三栏布局，液体居中，无左边距！
【发布时间】：2015-01-31 04:55:46
【问题描述】：

我都赞成基于 CSS 的布局，但我就是想不通。有一张桌子就很简单：

<html>
<head><title>Three Column</title></head>
<body>
<p>Test</p>
<table style="width: 100%; border: 1px solid black; min-height: 300px;">
<tr>
<td style="border: 1px solid green;" colspan="3">Header</td>
</tr>
<tr>
    <td style="border: 1px solid green; width: 150px;" rowspan="2">Left</td>
    <td style="border: 1px solid yellow;">Content</td>
    <td style="border: 1px solid blue; width: 200px;" rowspan="2">Right</td>
</tr>
<tr>
    <td style="border: 1px solid fuchsia;">Additional stuff</td>
</tr>
<tr><td style="border: 1px solid green;" colspan="3">Footer</td></tr>
</body>
<html>

左边是固定宽度
右边是固定宽度
内容是流动的
其他内容位于内容下方

现在是重要的部分：“左”可能不存在。同样，这对桌子很容易。删除该列，“内容”将展开。美丽的。我已经查看了许多基于液体和表格的少三列 CSS 布局的示例（和“圣杯”），但我还没有找到一个没有为中间列（“内容”）使用某种左侧边距的示例（“圣杯”） .一旦“Left”消失，任何左边距都会很糟糕，因为“Content”会留在原处。

我正要针对这个问题切换到基于旧学校表格的布局，所以我希望有人有一些想法 - 我不关心多余的标记、包装器等，我只想知道如何用纯 CSS 解决这个问题。顺便说一句：看看等高列是多么容易......

干杯

PS：请不要使用 CSS3

【问题讨论】：

标签： css

【解决方案1】：

body {
width: 600px;
}
.left {
float: left;
width: 200px;
}
.center {
float: right;
width: 100%;
}
.right {
float: right;
width: 200px;
}

这应该让 .center 在左侧被移除时扩展到整个宽度

【讨论】：

浏览器将中心设置为与整个窗口一样宽是否合法，需要水平滚动？（我的印象是“100%”的意思是“父元素的整个宽度”，而不仅仅是剩下的。）
理论上应该，但实际上这行不通。你会得到 .left 向左浮动，200px 宽 - 下一行是 100%（600px 宽，由你定义） .center 和下一行 .right 向右浮动。您不会让列彼此相邻浮动。