Question

我在包装器中有两个div。一个以20％宽度漂浮，一个以80％宽度漂浮。两者都具有最大宽度2000px和自动边距，以便使内容居中。我遇到的问题是，在更大的宽度上，div开始重叠，无论宽度如何，我都无法弄清楚如何将它们并排放置。

这是我的HTML：

<body>
<div class="wrapper">
<div class="container">
</div>
<div class="slider">
</div>
</div>
</body>

这是我的css

body
    {
    background-color: #3F3F3F;
    }


.wrapper
    {
    width: 100%;
    height: auto; 
    max-width: 2000px;
    margin-left:auto;
    margin-right:auto;
    } 

.container
    { 
    width: 20%;
    background-color:#F6F6F6;
    height: 200px;
    float: left;
    position: fixed;
    max-width: 2000px;
    margin-left:auto;
    margin-right:auto;
    }

    .slider {
        width: 80%; 
        height: 2000px;
        float: right; 
        position: relative;
        background-color: #8A0002;
        opacity: .2;
        max-width: 2000px;
        margin-left:auto;
        margin-right:auto;
        }

我是学生，非常感谢任何帮助！

Answer 1

在position: relative中使用.container。

使用position: fixed，它似乎将容器计算为包装器宽度的20％及其边距。

Answer 2

<强>更新

请忽略此答案我保留了评论。

你需要清除浮子。你可以read more here。

这是一种JSFiddle样本的一种方法。或者你可以简单地在你的包装器中添加一个元素并清除它。

.clearfix:before,
.clearfix:after {
 content: "";
 display: table;
}

.clearfix:after {
 clear: both;
}

.clearfix {
 zoom: 1; /* ie 6/7 */
}

添加这个做你的CSS并将你的包装器更改为<div class="wrapper clearfix">

参考：Sitepoint

fixed div与容器中的其他div重叠

2 个答案: