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下面排列。

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

1 个答案: