在CSS布局中间列不包装

Question

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

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

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

此外，我决定做分级标记 - 我将标题移动到源代码的底部，并将其放在绝对位置的顶部。我可能会尽快与左侧导航栏一起完成此操作。对于那些不熟悉这种做法的人，我前几天也只是了解到这一点 - 将重要内容放在页面的顶部，这使得搜索引擎更加友好。

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

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

Answer 1

我已成功将Soh Tanaka's Layout转换为3列。这并不完美 - 看起来，使用CSS，什么都不是 - 但这是一个开始。

My version有点乱，但它可以很容易地成为尝试做这种事情的人的开始。这是一个version with the left/right columns swapped。

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

Answer 2

你需要的是一个固定宽度的左列和固定宽度的右列和一个左右边距的中间列。

做到这一点的方法如下：

#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 3

我不知道如果我完全理解你的问题，但测试这个示例代码，看看它是否实现了你的目标是什么做（我用它打了很多，所以有可能是不需要的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> 

我敢肯定的最小宽度和最小高度性能上IE6不会工作，但它是一个开始。如果您不害怕打破IE6或7，您可以使用display：table和display：table-cell来代替使用实际表格。