CSS 布局技巧答案

【问题标题】：CSS Layout tricksCSS 布局技巧
【发布时间】：2010-09-20 14:17:03
【问题描述】：

我是第一次尝试 CSS 布局，我的 CSS 经验非常基础。我想要实现的是 2 列布局：左面板和内容。
我发现了这个：

#leftcontent
{
    position: absolute;
    left: 10px;
    top: 10px;
    width: 170px;
    border: 1px solid #C0C0C0;
    padding: 2px;
}

#centercontent 
{
    position: absolute;
    margin-left: 181px;
    border:1px solid #C0C0C0;
    top: 10px;
    //fix IE5 bug
    voice-family: "\"}\"";
    voice-family: inherit;
    margin-left: 181px;
}

这在 Firefox 中显示效果很好，但 IE8 中的内容离开屏幕右侧，我假设 #leftcontent 的长度。我该如何解决这个问题？

这可能是一个非常简单的修复，但我已经尝试并寻找修复，但这应该可以工作。感谢您的帮助。

【问题讨论】：

你有文档类型集吗？（作为旁注，请注意 IE8B2 仍然存在主要的渲染故障。

标签： html css layout

【解决方案1】：

我建议将#leftcontent 元素浮动到左边，然后设置#centercontent 元素的边距来补偿：

#leftcontent {
        float: left;
        width:170px;
        border:1px solid #C0C0C0;
        padding: 2px;
}

#centercontent {
        margin-left: 181px;
        border:1px solid #C0C0C0;
}

【讨论】：

这似乎在 ie8 中会产生相同的效果，它会给出一个水平滚动条

【解决方案2】：

在#centercontent 上设置宽度。无论是百分比还是像素大小，都将是您要查找的内容。

【讨论】：

【解决方案3】：

使用float 属性来执行此操作。一个优秀的浮动教程是Floatutorial。下面是你的 CSS 使用浮点数的样子：

#leftcontent {
    float: left;
    margin-left: 10px;
    margin-top: 10px;
    width: 170px;
    border: 1px solid #C0C0C0;
    padding: 2px;
}

#centercontent {
    float: left;
    margin-left: 10px;
    border: 1px solid #C0C0C0;
    margin-top: 10px;
}

然后，如果您希望 div 出现在这些 div 下方，则必须使用以下 CSS：

#contentbelow {
    clear: both;
}

此外，您应该为#centercontent 设置一个宽度，因为浮动元素总是需要一个明确的宽度。

【讨论】：

【解决方案4】：

我最喜欢的列布局方法是使用 float:left 和 right。

colwrapper 设置为 40em 宽度，margin-...:auto 使 div 居中（出于某种原因，除了 IE4 或 IE5 之外的所有内容）

footer 出现在两列之后，因为clear:both。

当您增加字体大小 (ctrl and + or -) 时，这将很好地缩放，并且您可以轻松地将列嵌套在列中（要进行 3 列布局，您可以执行相同的操作，但在 #colleft 中放置两个 div，并左右浮动）

#colwrapper{
    width:40em;
    margin-left:auto;
    margin-right:auto;
}
#colleft{
    float:left;
    width:10em;
}
#colright{
    float:right;
    width:30em
}
#footer{
    clear:both
}

还有 HTML：

<div id="colwrapper">
    <div id="colleft">
        left column!
    </div>
    <div id="colright">
        right column!
    </div>
    <div id="footer">
        footer!
    </div>
</div>

【讨论】：

【解决方案5】：

其他人对float 的看法应该会有所帮助。另外，还有两点需要检查：

您是否尝试过为左侧内容设置overflow，以便浏览器更好地了解当某些内容不适合您允许的空间时该怎么做。
您是否查找过导致左侧溢出的元素？有些元素无法被包裹，如果它们太宽，它们会强制整个 div 的宽度拉伸以适应它们。

【讨论】：

【解决方案6】：

使用一张桌子。它更适合这项任务，更容易实现，并且在不同浏览器中更可靠。

【讨论】：

我真的反对这个。表格用于列表数据。这是他们的预期目的，也是他们适合的。如果是设计，请使用 CSS - 如果可能，请不要更改 HTML。
表格由我上次查看时的一行或多行列化数据组成。如果你有多个列，那么你有一个表。当原生支持表格时，为什么要强制 DIV 像表格一样工作？
但是，当您想将它们更改为两行而不是两列时，您会怎么做？使用浮动 div，您只需编辑 CSS 即可更改页面布局，而无需更改 HTML。 HTML 用于内容，CSS 用于布局。
@Jeremy，好稻草人。例如，当您想从两列更改为三列时，您会怎么做？是的，您编辑 HTML，因为 DIV 存在于 HTML 中。 “HTML 用于内容；CSS 用于布局”是理想主义的，不可能完全实现。
实际上实现起来并不难，对我来说效果很好。看看我网站的源代码。 HTML 是所有
s 和 s 和
s 里面有内容，CSS 包含所有布局。