1

今天遇到一个奇怪的问题。我一直在使用浮动菜单,该菜单适用于我迄今为止测试过的所有内容(尚未使用旧的 IE 版本......),除了 firefox。页面在首次加载时正确呈现,但如果调整窗口大小,则受浮动元素影响的具有确定性布局的元素(即内联元素、具有溢出:隐藏的 div 等)无法更新。

有人有(最好是免费的)解决方法吗?

HTML:

<div id="leftBar">
    <a>test1</a>
    <a>test2</a>
</div>
<div id="bodyContent">
    <div>
        <div id="contenta">
            Hello world!
        </div>
    </div>
    <div>
        <p>Paragraph test</p>
    </div>
    <div style="clear:both">
        Enclosing div.
    </div>
</div>

CSS:

#leftBar {
    float:left;
    width:50px;
    background:red;
    height:75px;
}

#bodyContent {
    margin:0 auto;
    width:500px;
    background:green;
}

#bodyContent > div {
    overflow: hidden;
}
#contenta {
    width:100%;
    height:50px;
    background:blue;
}

jsfiddle在这里

4

1 回答 1

0

我不确定这是否是您想要实现的目标,但我个人会为元素使用容器。

#container {
    width: 550px;
}

#leftBar {
    float:left;
    width:50px;
    background:red;
    height:75px;
}

#bodyContent {
    margin:0 auto;
    width:500px;
    background:green;
    overflow: hidden;
}

#contenta {
    width:100%;
    height:50px;
    background:blue;
}

然后将您的内容包装在容器中。

于 2013-05-22T00:55:28.880 回答