如何管理內容之間的無形空白？

Question

我有一個相當簡單的頁面，其中包含鏈接到可下載文檔的圖像。我有一個部分浮動左側，另一個浮動右側，然後是一個空的div來清除兩個部分，然後再添加更多內容。

的問題是，有第一組的形式之間的不希望的間隙100像素和一般形式部分。

這裏是頁：http://www.orientalhealthsolutions.com/forms/

下面是HTML：

<div class="forms-nc"> 
<h2>Forms for OHS Durham, NC Patients</h2> 

<div class="form-box">  
<a href="http://www.orientalhealthsolutions.com/images/uploads/nc_downloads/OHS_CF1402_NP_Questionnaire.pdf""><img class="forms" src="http://www.orientalhealthsolutions.com/images/uploads/photos/btn_new-patients.jpg" alt="PDF Form" /></a> 
<p><a href="http://www.orientalhealthsolutions.com/images/uploads/nc_downloads/OHS_CF1402_NP_Questionnaire.pdf"">New Patient Questionnaire</a></p> 
</div> 

<div class="form-box">  
<a href="http://www.orientalhealthsolutions.com/images/uploads/nc_downloads/OHS_CF1401_Directions_to_907_Broad_St.pdf"><img class="forms" src="http://www.orientalhealthsolutions.com/images/uploads/photos/btn_directions.jpg" alt="PDF Form" /></a> 

<p><a href="http://www.orientalhealthsolutions.com/images/uploads/nc_downloads/OHS_CF1401_Directions_to_907_Broad_St.pdf">Driving Directions</a></p> 
</div> 

</div> 

<div id="forms-me"> 
<h2>Forms for OHS Maine Patients</h2> 

<div class="form-box">  
<a href="http://www.orientalhealthsolutions.com/images/uploads/hi_downloads/NP_questionnaire_Maine.pdf"><img class="forms" src="http://www.orientalhealthsolutions.com/images/uploads/photos/btn_new-patients.jpg" alt="PDF Form" /></a> 
<p><a href="http://www.orientalhealthsolutions.com/images/uploads/hi_downloads/NP_questionnaire_Maine.pdf">New Patient Questionnaire</a></p> 

</div> 

<div class="form-box">  
<a href="http://www.orientalhealthsolutions.com/images/uploads/hi_downloads/OHS-ME_Directions.pdf"><img class="forms" src="http://www.orientalhealthsolutions.com/images/uploads/photos/btn_directions.jpg" alt="PDF Form" /></a> 
<p><a href="http://www.orientalhealthsolutions.com/images/uploads/hi_downloads/OHS-ME_Directions.pdf">Driving Directions</a></p> 
</div> 

</div> 


<div class="more"></div> 
<h2>General Forms for All Patients</h2> 

<div class="form-box">  
<a href="http://www.orientalhealthsolutions.com/images/uploads/nc_downloads/Herb_Cooking_instructions.pdf"><img class="forms" src="http://www.orientalhealthsolutions.com/images/uploads/photos/btn_herbs.jpg" alt="PDF Form" /></a> 

<p><a href="http://www.orientalhealthsolutions.com/images/uploads/nc_downloads/Herb_Cooking_instructions.pdf">Herb Cooking Instructions</a></p> 
</div>   

<div class="form-box">  
<a href="http://www.orientalhealthsolutions.com/images/uploads/documents/Basal_Chart.pdf"><img class="forms" src="http://www.orientalhealthsolutions.com/images/uploads/photos/btn_bbt.jpg" alt="PDF Form" /></a> 
<p><a href="http://www.orientalhealthsolutions.com/images/uploads/documents/Basal_Chart.pdf">Basal Body Temperature Chart</a></p> 
</div>   

<div class="form-box">  
<a href="http://www.orientalhealthsolutions.com/images/uploads/hi_downloads/Food_Inventory.pdf"><img class="forms" src="http://www.orientalhealthsolutions.com/images/uploads/photos/btn_food.jpg" alt="PDF Form" /></a> 
<p><a href="http://www.orientalhealthsolutions.com/images/uploads/hi_downloads/Food_Inventory.pdf">Food Inventory Chart</a></p> 

</div> 

這裏是CSS：

.forms-nc    { width: 350px; height: 450px; float: left; border-right: 3px solid ; border-color: #ff2500; } 
#forms-me    { width: 300px; height: 450px; float: left; margin-left: 50px; } 

#forms #main_content a { 
    margin-left: 20px; 
} 

#forms #main_content h2 { 
    text-align: center; 
} 

#forms #main_content a.title { 
    text-align: center; 
} 

body#forms-2 div.forms { float: left; height: 1050px; } 
.form-box    { float: left; width: 180px; height: 190px; margin-right: 20px; } 
.form-box img.forms  { margin: 5px 0 0 80px; } 
.form-box p    { margin: 0 0 0 50px; padding: 0; width: 178px; height: 15px; text-align: center; } 
.more     { width: 600px; height: 5px; clear: both; } 

我已經嘗試了陰性切緣和不讓步。我很感激任何幫助，以清除這一點！

謝謝。

Answer 1

的問題是你的：

<div class="more"></div> 

總前窗體部分。它有一個clear: both，所以它總是在左側菜單中的圖像下方。如果你禁用JavaScript，你會發現差距更大，因爲菜單要高得多。

你可以做的是將forms-nc和forms-me包裝在另一個div中，並給該div一個overflow: hidden，這樣它就可以包裝兩個內部div。然後你可以擺脫.more股利和一般形式部分將直接排列在包裝div。