Question

好的，我已经尝试了一切。我成功地浮动div，并不断研究。有人请看看我的代码并告诉我有什么问题吗？非常感谢你。

我尝试改变div宽度，使用定位类型进行游戏，并使用显示属性进行混乱。我想不出别的办法解决这个问题。

问题出在本网站的页脚：

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中的某些内容被隐藏，但是向下推入页脚，导致您的花车停在其他地方。

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

至于为什么会发生这种情况，回答它会更麻烦。 #capabilities内有一个浮动导致这种情况。设置overflow: hidden;可能会解决现在的问题，但也可能意味着从长远来看会破坏别的东西（这是一种类型的clearfix hack，但是如果你的容器越来越高，你的容器会变得越来越高不知道为什么东西会被剪掉。）

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

常见的clearfix：

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

这需要与IE 6-＆amp;组合使用。仅限7个代码：

IE 7：

#capabilities { min-height: 100%; }

IE 6：

#capabilities { height: 100%; }

Answer 2

我想这可以完成这项工作，如果你清除你的div中的“空”换行符，只要它们可以使用css方式管理，使用边距或填充：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style>
#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: 300px;
    width: 300px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    position: relative;
}

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

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

#footer #footermain {
height: 400px;
width: 950px;
margin-right: auto;
margin-left: auto;}
</style>
</head>

<body>
<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><br />
<a href="mailto:fred@caprettacbc.com" class="class1">fred@caprettacbc.com</a> 

</h1></div>
<div id="f3">
  <p><br />
    <a href="contact.php" border="0"><img src="images/Contact_form_button.png" width="180"    border="0"/></a>  </p>
</div>

</div>
</div>
</body>
</html>

为什么我的div不会对齐？

2 个答案: