css布局中的中间列不换行答案

【问题标题】：middle column in css layout doesn't wrapcss布局中的中间列不换行
【发布时间】：2011-06-15 13:20:47
【问题描述】：

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

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

首先，中间列中的文本，而不是换行，一直拉伸中间列，将其移动到左列下方。我实施了@ZincX 的使用固定宽度列的建议（见下面他的帖子）。这固定了柱子，但它们周围的容器并没有随着它们伸展。如果你打开我的网站（见下面的链接），整个页脚隐藏在页眉后面。

另外，我决定做分层标记 - 我将标题移到源代码的底部，并以绝对定位将其放在顶部。一旦我把它整理好，我可能会用左边的导航栏来做这个。对于那些不熟悉这种做法的人，我也是前几天才知道的 - 将您的重要内容放在页面顶部使其对搜索引擎更加友好。

那么如何才能解决这个混乱的布局呢？我只想要一个简单的“页眉、三列、页脚”布局。以像素为单位给出绝对位置甚至是一种在大多数浏览器中都能很好显示的好习惯吗？

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

【问题讨论】：

@Egasimus - 您是否希望创建一个带有页眉、三列（左右占据所需宽度，中间占据剩余空间）和页脚的网站?
好吧，我不确定我是否会这样说——但左右两列的宽度是固定的（160px 左右），而中间列确实会占据所有剩余空间。整个布局将占据视口的 90%（最小宽度：600 像素；最大宽度：900 像素），并且最好居中。对于无法解决本应相当简单的问题，我感到非常沮丧......
我想我正在放弃使用 position: absolute - 绝对 div 被从流程中取出，并且与浮动不同，似乎没有办法让容器将它们包围起来......跨度>
别担心 - CSS 有时会让人非常沮丧 - 不管你信不信，看似简单的事情并不总是像你想象的那么简单。我认为您摆脱了position:absolute 属性并改用float 是正确的。绝对定位很棒，但不应该用作布局的一部分——它更像是一种提供效果的样式技术（无论如何在我看来）。
@Egasimus - 我不确定你是否乐意从头开始布局页面然后重新添加内容 - 但如果你愿意，试试this link

标签： css layout html

【解决方案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;
}

【讨论】：

谢谢，我试试这个。看着它，似乎它也巧合地帮助解决了我的另一个问题......
我试过了，它部分工作 - 但容器 div 不随列拉伸，页脚也出现在顶部。（查看我原来帖子中的第一个链接——它目前就在上面）
您可能需要将容器 div 放入 col_middle。页脚也需要有一个绝对位置。如果页脚的高度为 X，那么每一列都需要有底部：X。

【解决方案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 来代替实际的表格。

【讨论】：

谢谢（：不过，您的建议也遇到了同样的问题 - 中心栏被拉伸而不是环绕。
@egasimus 我不太清楚你所说的包装是什么意思。您是说希望中心 div 中的文本在高度较小时位于左右列下方？
@egasimus 啊，我刚刚在 IE 中测试了它，它的问题是在中心 div 中不包含文本，这是你的意思吗？
是的，在 Opera 中也是如此。

【解决方案3】：

我已成功将Soh Tanaka's Layout 转换为 3 列。它并不完美 - 似乎使用 CSS 什么都做不到 - 但这是一个开始。

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

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

【讨论】：