0

我是第一次尝试 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. 我怎样才能解决这个问题？

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

4

6 回答 6

4

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

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

#centercontent {
        margin-left: 181px;
        border:1px solid #C0C0C0;
}
于 2008-11-03T23:46:34.180 回答
1

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

于 2008-11-03T23:48:02.883 回答
1

使用该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 设置宽度，因为浮动元素总是需要明确的宽度。

于 2008-11-03T23:59:42.470 回答
1

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

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

footer由于 . 出现在两列之后clear:both。

ctrl and + or -当您增加字体大小（)

#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>
于 2008-11-04T02:27:46.743 回答
0

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

  • 您是否尝试过overflow为左侧内容设置 ，以便浏览器更好地了解当某些内容不适合您允许的空间时该怎么做。
  • 您是否寻找过导致左侧溢出的元素？有些元素不能被包裹，如果它们太宽，它们会迫使整个 div 的宽度拉伸以适应它们。
于 2008-11-04T00:43:42.430 回答
-8

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

于 2008-11-03T23:43:38.837 回答