css - 2 个 DIV 与 float :right 重叠

Question

我在 HTML 和 CSS 中工作，我发现很难重新排列重叠的元素。

Live example on the jsFiddle

CSS:

#posts {
    background: blue;
    float: right; 
    width: 75%; 
    padding: 5px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
}

#login-container {
    overflow: clear;
    background: white;
    width: 280px;
    height: 330px;
}

HTML:

<div id="content" class="container">
  <div id="posts">
    <div id="login-container">
        <div id="login">
            <h1>Member login</h1>
        </div>
    </div>
  </div>
</div>

当我调整浏览器窗口大小时，这两个总是相互重叠。 我希望我可以在这里张贴一张图片，但它需要重复 10 次。

Answer 1

请问，您在哪里关闭#posts div？这可能是因为 #login-container 在 #posts 中。