Css 为什么赢了'；我的div没有对齐吗？_Css_Html_Floating

Css 为什么赢了'；我的div没有对齐吗？

css html

Css 为什么赢了'；我的div没有对齐吗？,css,html,floating,Css,Html,Floating,好的，我什么都试过了。我曾经成功地漂浮过div，并且一直在不断地研究。有人能看一下我的代码，告诉我出了什么问题吗？多谢各位我尝试过改变div的宽度，摆弄过定位类型，还弄乱了显示属性。我想不出别的办法来解决这个问题问题位于此网站的页脚处： HTML: 发生这种情况的原因是，您的#maincontenttext中的某些内容被隐藏，但向下压入页脚，导致您的浮动位于其他位置这发生在#功能中：如果设置溢出：隐藏对于它，您的页脚位于您想要的位置至于为什么会发生这种情况，回答起来有点混乱。造成这种情

好的，我什么都试过了。我曾经成功地漂浮过div，并且一直在不断地研究。有人能看一下我的代码，告诉我出了什么问题吗？多谢各位

我尝试过改变div的宽度，摆弄过定位类型，还弄乱了显示属性。我想不出别的办法来解决这个问题

问题位于此网站的页脚处：

HTML:

发生这种情况的原因是，您的

#maincontenttext

中的某些内容被隐藏，但向下压入页脚，导致您的浮动位于其他位置

这发生在

#功能中：如果设置溢出：隐藏对于它，您的页脚位于您想要的位置
至于为什么会发生这种情况，回答起来有点混乱。造成这种情况的原因是#功能中有一个浮动。设置溢出：隐藏
现在可能会修复它，但从长远来看也可能意味着破坏其他东西（这是一种clearfix黑客，但宽度和高度都是固定的，如果你的容器变得更高，而你不知道为什么东西会被剪掉，这将意味着问题。）
您可以对您的#功能
应用clearfix，这可能是最安全的选择，如果需要，可以为#功能
提供一些额外的高度，并且页脚保持原始状态。搜索clearfix以获取更多信息
常见的clearfix：
#capabilities:after { display: block;
    clear: both;
    height: 0;
    visibility: hidden;
    content: ' '; }

这确实需要与仅限IE 6和7的代码结合使用：
IE 7：
IE 6：
我想这就可以了，如果你清除了你的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>


无名称文件
#页脚{
字体系列：“Sintony”，无衬线；
字体大小：12px；
字体风格：普通；
字体大小：正常；
颜色：#FFF；}
#页脚#页脚主页脚#f1{
边际：0px；
浮动：左；
高度：300px；
宽度：300px；
填充顶部：0px；
右边填充：0px；
垫底：0px；
左侧填充：0px；
位置：相对位置；
}
#页脚#页脚主#f2{
边际：0px；
浮动：左；
高度：300px；
宽度：300px；
填充顶部：0px；
右边填充：0px；
垫底：0px；
左侧填充：0px；
位置：相对位置；
}
#页脚#页脚主页脚#f3{
边际：0px；
浮动：对；
高度：300px；
宽度：300px；
填充顶部：0px；
右边填充：0px；
垫底：0px；
左侧填充：0px；
位置：相对位置；
}
#页脚#页脚主{
高度：400px；
宽度：950px；
右边距：自动；
左边距：自动；}













您希望它们以何种方式对齐？leemo提出了一个好问题！你期望的结果是什么？嗯，只是另一个胡说八道的问题……事实上，我猜你希望DIF F1 F2 F3水平对齐，对吗？我认为你应该考虑位置：相对，避免使用“自动”在高度，和明确的线路馈送在所有您的div@Blue天空：这就像钓鱼：多吃多钓鱼；）；）
#capabilities:after { display: block;
    clear: both;
    height: 0;
    visibility: hidden;
    content: ' '; }

#capabilities { min-height: 100%; }

#capabilities { height: 100%; }

<!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>