Question

我正在尝试使用标题+内容+页脚+侧边栏创建一个简单的标记。侧边栏必须浮动在标题和内容元素之上，如果它高于内容，则必须将页脚向下推（如下所示：http://jsfiddle.net/gWLFN/7/）。

HTML：

<div id="wrapper">
    <div id="sidebar">sidebar</div>
    <div id="header">header</div>
    <div id="content">content</div>
    <div style="clear:both"></div>
    <div id="footer">footer</div>
</div>

CSS：

#wrapper { width:500px }
#header { width:500px; height:100px; background-color:red }
#content { width:500px; height:300px; background-color:green }
#footer { width:500px; height:100px; background-color:blue }
#sidebar { 
    float:right; 
    margin-top:50px; 
    width:100px; 
    height:500px; 
    background-color: yellow; 
    border:1px solid white;
}

问题是在IE7中，侧边栏会压低其他元素。我认为这是因为标题+侧边栏的总宽度大于包装宽度。我在IE7中找到了很多关于float：right问题的帖子，但所有这些都是针对宽度不超过包装器的。

我选择了浮动：右边而不是绝对定位，因为页脚的位置必须取决于侧边栏的高度（如果有人知道如何用绝对定位做到这一点，完美！）。

我很感激任何想法来解决这个问题。

Answer 1

你几乎就在那里，HTML结构的顺序有些混乱，你强迫CSS宽度而不是让浏览器最合适。

您可以从嵌套的CSS类（width除外）中删除#sidebar值，因为默认情况下它们会占用任何剩余的宽度，除非它们指定了一个。然后你只需要在HTML结构中交换#header和#sidebar，你几乎可以排序。

请注意，由于我们已经交换了#header和#sidebar，margin-top内的#sidebar已经更改。

CSS

#wrapper { 
    width:500px;
}

#header {
    height:100px;
    background-color:red;
}

#content {
    height:300px;
    background-color:green;
}

#footer {
    height:100px;
    background-color:blue;
}

#sidebar { 
    float:right; 
    margin-top: -50px; /*changed this to -50px */ 
    width:100px; 
    height:500px; 
    background-color: yellow; 
    border:1px solid white;
}

HTML 的

<div id="wrapper">
    <div id="header">header</div>
    <div id="sidebar">sidebar</div>
    <div id="content">content</div>
    <div style="clear:both"></div>
    <div id="footer">footer</div>
</div>

工作示例：http://jsfiddle.net/gnx2z/

Float right元素按下IE7中的下一个元素

1 个答案: