左側浮動多個元素

Question

我有8個div，我將它們全部向左浮動，因爲我希望它們全部位於同一行，並溢出其容器。出於某種原因，他們是成對的，我不確定爲什麼。這裏是的jsfiddle http://jsfiddle.net/wp9jB/

這裏是代碼：

.standard_containers { 
width:275px; 
padding-top:15px; 
padding-right:10px; 
padding-left:10px; 
padding-bottom:15px; 
float:left; 
margin-left:7px; 
margin-right:7px; 
} 

<div style="width:690px;border:1px solid red;position:relative;"> 


<div class="standard_containers shadow gradient_2"> 

<p class="head_med_blue">Physical Thearpy Protocols</p> 

</div> 

<div class="standard_containers shadow gradient_2"> 

<p class="head_med_blue">Physical Thearpy Protocols</p> 

</div> 



<div class="standard_containers shadow gradient_2"> 

<p class="head_med_blue">Physical Thearpy Protocols</p> 

</div> 

<div class="standard_containers shadow gradient_2"> 

<p class="head_med_blue">Physical Thearpy Protocols</p> 

</div> 



<div class="standard_containers shadow gradient_2"> 

<p class="head_med_blue">Physical Thearpy Protocols</p> 

</div> 

<div class="standard_containers shadow gradient_2"> 

<p class="head_med_blue">Physical Thearpy Protocols</p> 

</div> 



<div class="standard_containers shadow gradient_2"> 

<p class="head_med_blue">Physical Thearpy Protocols</p> 

</div> 

<div class="standard_containers shadow gradient_2"> 

<p class="head_med_blue">Physical Thearpy Protocols</p> 

</div> 


<br style="clear:both;" /> 
</div> 

Answer 1

它們都是成雙成對，因爲你的<div>有690px的寬度。在一個「列」中將所有項目設置爲320px - 對於一個「行」中的所有項目將其設置爲2500px。

如果DIV 必須有690px寬，<div style="width:320px;border:1px solid red;margin-right:370px;">

Answer 2

如果你想所有8個元素以適應該div都在同一行，那麼你將不得不減少的大小。 standard_container類

<style type="text/css"> 
    .standard_containers { 
     width:60px; 
     padding:15px 6px; 
     float:left; 
     margin:0 7px; 
    } 
</style> 

我用短針，代替具有填充頂部，填充底，邊距等，第一個數字是頂&底部，而第二個數字是右&左側。