Question

我第一次用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的长度。我该如何解决这个问题？

这可能是一个非常简单的修复，但我已经尝试并寻找修复，但这应该是有效的。我感谢任何帮助。

Answer 1

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

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

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

Answer 2

在#centercontent上设置宽度。无论是百分比还是px大小都是您正在寻找的。

Answer 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设置宽度，因为浮动元素始终需要显式宽度。

Answer 4

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

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

由于footer，

clear:both出现在两列之后。

当你增加font-size（ctrl and + or -）时，这会很好地扩展，你可以轻松地将列嵌入列中（做3列布局，你做同样的事情，但是把两个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>

Answer 5

其他人对float所说的应该有所帮助。另外，有两件事需要检查：

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

Answer 6

使用表格。它更适合于任务，更容易实现，并且在不同浏览器中更加可靠。

CSS布局技巧

6 个答案: