奇怪的对齐错误 - CSS

Question

我试图在div #contact的右边浮动元素，required和nrequired，元素之间的间距为20px。这适用于所需的元素，但是当我插入一个nrequired元素时，nrequired元素将自己对齐到最后一个必需元素的左边，而不考虑20px间距。请问你能告诉我是什么造成的吗？

这是一张显示这种奇怪事件的图片，以及我的代码。

#contact #required {
    background-image: url('../img/req_field.png');
    background-repeat: no-repeat;
    width: 441px;
    height: 54px;
    margin-bottom: 20px;
    float: right;
    display: block;
}

#contact #nrequired {
    background-image: url('../img/field.png');
    background-repeat: no-repeat;
    width: 421px;
    height: 54px;
    margin-bottom: 20px;
    float: right;
    display: block;
}

<div id="email">
    <h1>Shoot me an email </h1>
    <h2> (All required fields are marked *)</h2>
    <div id="required"/>
    <div id="required"/>
    <div id="nrequired"/>
    <div id="logo"/>
</div>

Answer 1

首先，您不能每页多次使用相同的id - 它们必须是唯一的。将ID更改为类名，并相应地修复选择器。

对于您的布局问题，将clear:right;添加到div应该可以解决问题。

  

造成这种情况的原因是什么？

div是浮动的，所以他们会尝试适应任何可用的空间，并且你显然在容器中有足够的空间可以并排放置。