奇怪的对齐错误 - CSS

Question

我想浮动元素，需要和必要的，在div #contact与元素之间的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是浮动的，所以他们会尽量适应任何可用空间，并且您有明显的容器足够的空间并排，以适应两侧。