Question

编辑：好的，所以我在这里有点亏。实际上，在很大的损失。我正在认真考虑增加对CSS的个人仇恨及其反直觉性。

所以我试图制作一个3列的布局。它曾经基于Holy Grail layout，但后来我决定不需要流动性或相等的列高度，并开始修改CSS以更好地满足我的需求。

首先，中间列中的文本不是包裹，而是继续拉伸中间列，将其移动到左列下方。我实现了@ ZincX使用固定宽度列的建议（参见下面的帖子）。这固定了柱子，但是它们周围的容器没有伸展。如果您打开我的网站（请参阅下面的链接），标题后面会隐藏整个页脚。

此外，我决定进行分层标记 - 我将标题移动到源代码的底部，并将其置于绝对定位的顶部。一旦我解决了这个问题，我可能会在左侧导航栏中执行此操作。对于那些不熟悉这种做法的人来说，我前几天才了解到这一点 - 将重要内容放在页面顶部会使搜索引擎更加友好。

那么如何修复这个庞大的布局呢？我只想要一个简单的“标题，三列，页脚”布局。以像素为单位提供绝对位置，即使是在大多数浏览器中都能很好地显示的良好实践吗？

Here's the site I'm working on。
And here's my stylesheet

Answer 1

您需要的是固定宽度左列和固定宽度右列以及具有左右边距的中间列。

执行此操作的方法如下：

#col_left {
    display: block;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    width:200px;
}

#col_right {
    display: block;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width: 200px;
}
#col_middle {
    display: block;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    right:0;
    margin-left:200px;
    margin-right:200px;
}

Answer 2

我不确定我是否完全理解你的问题，但是测试一下这个示例代码，看看它是否能完成你的目标（我玩了很多，所以可能有部分CSS不需要）：

<强> CSS：

* { margin:0; padding:0; border:none; }
#header {
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:75px;
    background-color:#666666;
}

#belowHeader {
    position:absolute;
    top:75px;
    left:0;
    right:0;
    height:auto;
    min-width:604px;
    text-align:center;
}

#colLeft {
    height:auto;
    min-height:100px;
    float:left;
    width:200px;
    background-color:#888888;
}
#colMiddle {
    height:auto;
    min-height:150px;
    width:200px;
    display:inline-block;
    background-color:#999999;
}
#colRight {
    float:right;
    height:auto;
    min-height:100px;
    width:200px;
    background-color:#888888;
}

#footer {
    position:absolute;
    bottom:-75px;
    left:0;
    right:0;
    height:75px;
    background-color:#666666;
}

HTML正文：

<div id="header"></div>
<div id="belowHeader">
    <div id="colLeft"></div>
    <div id="colMiddle"></div>
    <div id="colRight"></div>
    <div id="footer"></div>
</div>

我很确定min-width和min-height属性在IE6上不起作用，但它是一个开始。如果你不怕打破IE6或7，你可以使用display：table和display：table-cell而不是使用实际的表格。

Answer 3

我已成功将Soh Tanaka's Layout转换为3列。它并不完美 - 似乎用CSS，没有什么可以 - 但它是一个开始。

My version有点混乱，但对于试图做这种事情的人来说，这很容易就是一个开始。这是一个version with the left/right columns swapped。

注意DOCTYPE - 如果它是HTML 4.01，则可能需要更改为XHTML Transitional;否则，布局可能无法在IE中工作。或者也许可能。

css布局中的中间列不会换行

3 个答案: