Question

我全都赞成基于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的布局的示例（和“圣杯”），但我还没有找到一个没有使用某种边距的中间列（“内容”）。一旦“左”消失，任何保证金将会消失，因为“内容”将保留在它的位置。

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

干杯

PS：请不要CSS3

Answer 1

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

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

CSS三列布局，液体中心，没有左边距！

1 个答案: