我都赞成基于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解决这个问题。顺便说一句:看看等高柱子有多简单…
干杯
附言:请不要CSS3
