5

我试图让一个动态大小的侧边栏浮动在我的网页的右上方（但在标题和导航下方）并让页面上的主要内容围绕它流动（有点像“L”形除了“L”的底部很厚）。侧边栏的宽度和高度会因页面而异，因此我不能使用任何硬值。

我的CSS看起来像：

#main {
    width: 850px;
    height: auto;
}

#sidebar {
    width: auto;
    float: right;
}

（加上一些我认为无关紧要的填充、边距和背景颜色代码）

我的 html 看起来像：

<div id="wrapper">  
    <div id="header">    /* header stuff */    </div>  
    <div id="nav">       /* nav stuff */       </div>  

    <div id="sidebar">  
        /* my sidebar content, really just an h3 and a ul */
    </div>

    <div id="main">
        /* lots of content here */
    </div>
</div>

我不完全理解为什么我必须首先拥有侧边栏 div，但是这段代码在 FF、Chrome、Safari (Windows) 和 IE8 中运行良好。但是在 IE7（和我不关心的 IE6）上，主要内容被推到侧边栏底部下方，好像侧边栏 div 上有一个“clear：left”（但没有） .

我有一种感觉，这是 IE7 不合规错误之一，特别是因为 IE8 的行为与其他浏览器完全一样。但我不知道如何解决它。

有任何想法吗？TIA。

4

3 回答 3

2

首先，确保您使用的文档类型会将 IE7 置于严格模式（有关说明，请参见http://hsivonen.iki.fi/doctype/）。如果这样做不行，则可能是您需要在边距宽度上进行一些调整。

你必须首先拥有侧边栏 div 的原因是因为 div 是一个显示为块元素的任何东西，它后面的任何东西都会在它下面（除非你浮动主 div）。

通过浮动侧边栏 div 并将其放在首位，浏览器知道它可以将主 div 显示在侧边栏的右侧。您可以通过将浮动左侧添加到主 div 并从侧边栏 div 中删除浮动并将其移动到主 div 之后来获得类似的效果。

于 2009-06-05T02:07:02.740 回答
0

根据您的描述，听起来您的侧边栏表现得好像它是一个块元素。也许尝试一些不同的显示选项，如 inline-block。我也会尝试使用 width min-width 属性。不过很难说。

于 2009-06-05T02:00:40.150 回答
0

答对了！固定的！那些提到玩宽度和边距的家伙今晚获得了金星。事实证明，我所要做的就是删除主 div 上的固定宽度，然后在右侧添加一些填充来为文本和图像创建一个装订线。在 FF3、Chrome、Safari (Win) 以及最重要的 IE6 和 IE7 中测试和确认（尽管我仍然讨厌 IE）。

我猜 IE 渲染引擎在说，“我看到你希望你的主 div 宽度为 850 像素，但是你的侧边栏卡在那里，我没有空间，所以我不得不把它推到侧边栏下面” . 当然，其他所有浏览器的渲染引擎都会说：“伙计，我完全明白你想要做的事情！没问题，我会按照你的意愿布置一切。”

于 2009-06-05T02:37:37.423 回答