Question

在小型网站上工作时我遇到了一个奇怪的问题。

我无法让我的包装器正确地包裹所有其他div。我的代码如下所示：

<body>
<div id="wrapper">
    <div id="header">
        <div id="menu">
        </div>
    </div>
    <div id="content">
        <div id="text">
            <form></form>
        </div>
        <div id="contact"><img />
            <map name="Map" id="Map">
            </map>
        </div>
    </div>
    <div class="clear"></div>
</div>
</body>

CSS：

body {
    margin: 0px;
    background-image: url(../images/bg.jpg);
    background-repeat: repeat-x;
}
#wrapper {
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
}
#header {
    height: 560px;
    width: 1190px;
    margin-right: auto;
    margin-left: auto;
    background-image: url(../images/Header.jpg);
    background-repeat: no-repeat;
}
#menu {
    width: 640px;
    position: relative;
    left: 350px;
    top: 115px;
}
#content {
    width: 1190px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 10px;
}
#text {
    width: 550px;
    float: left;
    margin-bottom: 20px;
    position: relative;
    left: 180px;
}
#contact {
    float: left;
    margin-bottom: 20px;
    position: relative;
    left: 230px;
    top: 50px;
}
.clear {
    clear: both;
}

包装似乎包裹在我的一些页面上，但不是全部，如果我在#contact中指定图像的大小，它将在其他页面上失败。但是，它确实包装了#text div。

非常高兴得到任何帮助！

最诚挚的问候罗伯特

Answer 1

联系div附加的position: relative;样式弄乱了底部附近的包装。如果删除该样式，然后将偏移量转换为边距，则包装器div现在可以正确地包装所有内容div。我在这里为您的代码设置了一个示例： http://jsbin.com/eqecev/2/edit#preview

Answer 2

将overflow:auto;添加到您的包装div的CSS。

奇怪的CSS浮动和清除错误？

2 个答案: