奇怪的對齊錯誤 - 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是浮動的，所以他們會盡量適應任何可用空間，並且您有明顯的容器足夠的空間並排，以適應兩側。