Question

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

任何人都有（最好是免费的javascript）解决方法吗？

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 here。

Answer 1

我不确定这是否是你想要实现的目标，但我会亲自为元素使用容器。

#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;
}

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

Firefox不会在窗口大小调整时更新依赖于浮动的布局

1 个答案: