Question

我似乎无法让我的CSS在IE中正常工作（我正在使用IE 8），我希望有人可以就此分享一些意见。

这是我愚蠢的HTML代码： -

<div id="column-content">
    <div id="content">
        <p>This is some text</p>
        <div class="toc">Right content</div>
    </div>
</div>

我想要的是让div#column-content显示在左侧，嵌套div.toc显示在div#column-content容器外侧的右侧。可以把它想象成两列布局，但唯一的问题是我无法彻底改变这个HTML代码来模仿我在网站上找到的一些更简单的布局。因此，对我来说唯一的解决方案就是把CSS弄得像我想要的那样。

这就是我的CSS： -

#column-content {
    width: 50%;
    float: right;
}

#content {
    margin: 0 15em 0 0;
    position: relative;
    border: 1px solid #ccc;
    background-color:yellow;
}

div.toc {
    margin:-3.3em -14em 0 0;
    width:200px;
    float:right;
    border: 1px solid #ccc;
    background-color:pink;
}

我在Firefox和所有gecko浏览器中获得了我想要的效果。如果您在Firefox中查看它，您可以看到黄色框和粉红色框之间的清晰分隔。当我在IE中查看它时，这些盒子似乎彼此粘在一起，我似乎无法实现盒子之间的差距。

这可以在所有浏览器中使用吗？为了更清楚地了解HTML，div.toc始终位于div#content容器内。我被允许在div#content中添加更多HTML标签并调整CSS以使两列布局工作。

非常感谢。

Answer 1

更改

div.toc {margin:-3.3em -14em 0 0;}

要

div.toc {margin:-3.3em -14em 0 1em;}

为我工作（再次，根据我对你的问题的评论，IE7），并没有影响FireFox渲染（我没有检查任何其他浏览器）。显然，IE7不会通过负右边距进一步移动它，但添加左边距会使你的差距缩小。

如果您将div.toc放在content下方并删除-3.3em上边距，我认为您会获得更好的结果。所以：

<div id="column-content">
    <div id="content">
        <div class="toc">Right content</div>
        <p>This is some text</p>
    </div>
</div>

使用：

div.toc {margin: 0 -14em 0 1em;}

如何使用以下HTML代码实现双列布局？

1 个答案: