Question

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

问题是，在第一组表单和General forms部分之间有一个不需要的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>

在“通用表格”部分之前。它有一个＜code＞clear:both＜/code＞，所以它总是在左侧菜单上的图像下方。如果你禁用javascript，你会发现差距甚至更大，因为菜单要高得多。

您可以做的是，将形式nc和格式me包装在另一个div中，并给该div一个溢出：hidden，使其包装两个内部div。然后，您可以去掉.morediv，General Forms部分将直接排列在包装器div下。

友情链接