css - 我如何管理内容之间的这种无形差距？

Question

我有一个相当简单的页面，其中包含链接到可下载文档的图像。我有一个向左浮动的部分，另一个向右浮动的部分，后跟一个空的 div，以便在我添加更多内容之前清除这两个部分。

问题是第一组表单和一般表单部分之间存在不需要的 100px 间隙。

这是页面: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，General Forms 部分将直接排在包装 div 的下面。