Question

I am experimenting for the first time with css layouts and my experience with CSS is very basic. What I want to achieve is a 2 column layout: left panel and content.
I have found this:

#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上设置一个宽度。无论是百分比还是像素大小，都应该是您要寻找的。

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 和 float:right 进行栏目布局的方法。

colwrapper 的宽度设置为 40em，margin-...:auto 使 div 居中显示（除了 IE4 或 IE5 以外的其他浏览器，原因不明）

因为有“clear: both”，所以“footer”会出现在两列后面。

当您增加字体大小（ctrl和+或-）时，它将很好地缩放，您可以轻松地在列中嵌套列（要做三列布局，您可以同样操作，但将两个div放在#colleft中，然后使它们左右浮动）。

#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

别人关于浮点数所说的应该有所帮助。此外，还有两件事要检查：

Have you tried setting the overflow for the left content, so the browser has a better idea of what to do when something doesn t fit in the space you allowed.
Have you looked for what element is causing the left side to overflow? Some elements just can t be wrapped, and if they are too wide they will force the width of the entire div to stretch to accommodate them.

友情链接