css - 为什么我的 div 不对齐？

Question

好的，我已经尝试了一切。我之前成功地 float 过div，并且一直在研究。有人可以看看我的代码并告诉我哪里错了吗？非常感谢。

我试过改变 div 宽度、调整定位类型以及弄乱显示属性。我想不出任何其他方法来解决这个问题。

问题位于本网站的页脚:

http://caprettacbc.com/index2.html

HTML:

<div id="footer">
<div id="footermain">

<div id="f1">
<ul>
<li><a href="index2.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="articles.html">Articles</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="f2"><h1>Contact</h1>
7553 Estate Ave.<br />
Hudson, Ohio  44236<br /><br />
Office: (330) 425-1553<br />
Mobile: (440) 823-8498<br /><br />
<a href="mailto:fred@caprettacbc.com" class="class1">fred@caprettacbc.com</a> 

</div>
<div id="f3"><p>Feel free to fill out a contact form to learn more, and recieve a <b>free         eBook</b> and <b>free one-hour consultation</b>. Click below to fill one out.</p><br />
<a href="contact.php" border="0"><img src="images/Contact_form_button.png" width="180"    border="0"/></a>
</div>

</div>
</div>

CSS:

#footer  {
font-family: 'Sintony', sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #FFF;}

#footer #footermain  #f1 {
margin: 0px;
float: left;
height: auto;
width: 300px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;

}

#footer #footermain  #f2 {
margin: 0px;
float: left;
height: auto;
width: 300px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;

}

#footer #footermain  #f3 {
margin: 0px;
float: right;
height: auto;
width: 300px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;

}

#footer #footermain {
height: 400px;
width: 950px;
margin-right: auto;
margin-left: auto;}

Answer 1

发生这种情况的原因是因为您的 #maincontenttext 中的某些内容被隐藏，但向下推到页脚中，导致您的 float 位于其他地方。

这发生在 #capabilities 中:如果您将 overflow: hidden; 设置为它，您的页脚会回到您想要的位置。

至于为什么会这样，回答起来有点乱。 #capabilities 中有一个 float 导致了这一点。设置 overflow: hidden; 可能暂时修复它，但从长远来看它也可能意味着破坏其他东西(这是一种 clearfix hack，但具有固定的宽度和高度，如果你的容器变高了，你不知道为什么东西会被剪掉。)

您可以对 #capabilities 应用 clearfix，这可能是最安全的选择，如果需要，可以为 #capabilities 提供一些额外的高度，并且页脚保持原始状态.搜索 clearfix 以获取更多信息。

一个常见的 clearfix:

#capabilities:after { display: block;
    clear: both;
    height: 0;
    visibility: hidden;
    content: ' '; }

这确实需要与仅限 IE 6 和 7 的代码结合使用:

IE 7:

#capabilities { min-height: 100%; }

IE 6:

#capabilities { height: 100%; }