float right property block another div

Question

你可以看到我有三個div。在div「約」我已經設置了背景顏色，並有一些標題， ，但當我設置浮動：正確的屬性爲div「盒子」它阻止div「約」。

有誰能告訴我爲什麼會這樣？

謝謝！

這是我的HTML：

<div id="about"> 

<div id="content_holder"> 

<div class="boxes_8"><img src="images/jack.jpg" width="227" height="227" alt="jack">  </div> 
<div class="boxes"></div> 
<div class="boxes"></div> 
<div class="boxes"></div> 
<div class="boxes"></div> 
<div class="boxes"></div> 
<div class="boxes"></div> 
<div class="boxes"></div> </div> 
</div> 

和css：

#content_holder{ 
display: block; 
position: relative; 
margin: 0 auto; 
margin-top:10px; 
width: 910px; 
min-height: 20px;} 

.boxes{ 
display:block; 
float: left; 
width: 227.5px; 
height:227.5px;} 
#about{ 
background-image: linear-gradient(bottom, rgb(75,72,71) 0%, rgb(37,37,35) 69%); 
background-image: -o-linear-gradient(bottom, rgb(75,72,71) 0%, rgb(37,37,35) 69%); 
background-image: -moz-linear-gradient(bottom, rgb(75,72,71) 0%, rgb(37,37,35) 69%); 
background-image: -webkit-linear-gradient(bottom, rgb(75,72,71) 0%, rgb(37,37,35) 69%); 
background-image: -ms-linear-gradient(bottom, rgb(75,72,71) 0%, rgb(37,37,35) 69%); 

background-image: -webkit-gradient(
linear, 
left bottom, 
left top, 
color-stop(0, rgb(75,72,71)), 
color-stop(0.69, rgb(37,37,35)) 
); 
} 

Answer 1

我有點困惑，你想從你的代碼完成的任務。因爲你的.boxes的div是浮動的，他們實際上滑#content_holder容器外，除非你添加以下的CSS：

#content_holder:after{ 
    content: ''; 
    display: block; 
    visibility: invisible; 
    clear: both; 
} 

，將確保您的#content_holder環繞你的div .boxes（這是我承擔你想要的，因爲它們在HTML中）。你的第一個盒子，裏面有img的盒子，在你提供的代碼中根本沒有CSS樣式，所以它延伸到填滿整條線。這是你想要的，還是你想要所有的.boxes divs排成一行（或幾行）？如果是這樣，更改以下行：

.boxes{ 

這樣：

.boxes, .boxes_8{ 

這將導致.boxes_8 div來讓其他框到它的右側。

你想要達到什麼佈局？如果你詳細說明，我可以提供更有幫助的答案。