0

我正在尝试将菜单 div 浮动到内容 div 的左侧。菜单 div 位于 html 中的内容 div 之后。内容 div 有一个左边距，所以它看起来就在右边的菜单旁边。也就是说，当媒体查询没有设置样式时，顺序将是内容 div，然后是菜单 div。

我遇到的问题是浮动菜单 div 超出其容器并遍历页面末尾的内容。我已经尝试清除浮动，在这种情况下没有任何作用。此外，在容器上设置溢出也无济于事，因为有一个我不想要的滚动条。

有人对如何解决这个问题有任何想法吗？也许有其他方法可以解决这个问题？我所需要的只是让菜单 div 在内容 div 之后，让内容 div 占据剩余的可用宽度并设置样式，以便菜单位于 IE8+ 和所有最近的主要网站内容的左侧浏览器。

这是问题的一个示例（http://jsfiddle.net/m9zG8/）：

<div>
    some top content
</div>
<div id="container">
    <div id="content">
        "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </div>
    <div id="menu">
        <a href="">serveral</a><br/>
        <a href="">links</a><br/>
        stuff<br/>
        this<br/>
        is<br/>
        long<br/>
        long<br/>
        long<br/>
        long<br/>
        long<br/>
     </div>
     <div style="clear:left"></div>
</div>
<div style="clear:left"></div>
<div>
    some bottom stuff<br/>
    this is being cut off by the floating menu.
</div>

#container {
    position: relative;
}
#content {
    background-color: blue;
    margin-left: 6em;
}
#menu {
    background-color: green;
    width: 5em;
    float: left;
    position: absolute;
    top: 0;
}

注意：背景颜色只是为了更容易看到。

4

1 回答 1

2

我认为您需要浮动菜单而不是绝对定位。将宽度设置为 % 将确保菜单宽度加上内容宽度可以加起来为 100%。（您也可以通过使宽度更小一些来添加填充或边距。） http://jsfiddle.net/m9zG8/2/

#content {
    background-color: blue;
    width:85%;
    float:right;
}
#menu {
    background-color: green;
    width: 15%;
    float: left;
}
于 2013-09-03T16:16:45.063 回答