我想将“leftbox”、“midbox”和“rightbox”div 排列在一起。 当我使用 float:left 时，我的页脚会转到顶部。
任何人都可以帮助我，所以我可以让它们并排排列，而我的页脚仍然在下部。
任何人都想更改我的代码以使其尺寸变小。
这是我的代码。
<html>
<head>
<title>
XXX
</title>
</head>
<style>
body{
margin-top:0px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
background-color:#dedede;
}
#header{
background: none repeat scroll 0% 0% rgb(241, 241, 241);
background-color: rgb(68, 68, 68);
background-image: none;
background-repeat: repeat;
background-position: 0% 0%;
background-size: auto auto;
height: 31px;
position:fixed;
//position:relative;
top: 0px;
width: 100%;
z-index: 985;
min-width: 980px;
}
#header2{
background: none repeat scroll 0% 0% rgb(241, 241, 241);
background-color: rgb(241, 241, 241);
background-image: none;
background-repeat: repeat;
background-size: auto auto;
border-bottom: 1px solid rgb(221, 221, 221);
border-bottom-width: 1px;
border-bottom-style: solid;
height: 71px;
position:fixed;
//position:relative;
top: 31px;
width: 100%;
z-index: 985;
min-width: 980px;
}
#wrapper{
position:relative;
width:980px;
height:auto;
margin:auto;
}
#logo{
position:absolute;
top:0px;
left:10px;
width:102px;
height:60px;
font:68px Blue Highway;
color:#01b5ce;
}
#logo:hover{
color:#aaaaaf;
}
#navigation{
position:absolute;
top:30px;
left:170px;
width:auto;
height:40px;
}
#navigation a{
position:relative;
top:20px;
width:auto;
height:30px;
font:18px Corbel;
margin-left:5px;
border-left:1px solid #dddddd;
text-decoration:none;
color:#aaaaaf;
}
#navigation a:hover{
color:#01b5ce;
}
#access{
position:absolute;
top:5px;
right:10px;
width:auto;
height:20px;
}
#access a{
position:relative;
text-decoration:none;
color:#01b5ce;
font:18px Corbel;
margin-left:10px;
}
#body{
position:relative;
top:100px;
width:980px;
height:auto;
margin:auto;
background-color:#ffffff;
}
#leftbox{
position:relative;
top:10px;
left:10px;
width:160px;
height:auto;
background-color:red;
}
#ads{
position:relative;
top:10px;
width:160px;
height:auto;
background-color:green;
}
#midbox{
position:relative;
top:10px;
margin-top:10px;
left:10px;
width:500px;
height:auto;
background-color:red;
}
#latest{
position:relative;
top:10px;
width:500px;
height:auto;
background-color:green;
}
#rightbox{
position:relative;
top:10px;
margin-top:10px;
left:10px;
width:280px;
height:auto;
background-color:red;
}
#top{
position:relative;
top:10px;
width:280px;
height:auto;
background-color:green;
}
.title{
position:relative;
width:100%;
height:20px;
background-color:yellow;
font:20px WLM Carton;
color:#cc0000;
}
#footer{
background: none repeat scroll 0% 0% #444444;
background-color: #444444;
background-image: none;
background-repeat: repeat;
background-position: 0% 0%;
background-size: auto auto;
height: 100px;
position: relative;
top: 105px;
width: 100%;
z-index: 985;
min-width: 980px;
}
#footerContent{
position:relative;
top:10px;
margin:auto;
width:980px;
height:80px;
color:#ffffff;
font: 12px Arial,tahoma;
}
#ads ul{ list-style:none; padding:0; margin:0; width:390px; height:auto;}
#ads ul li{ padding:5px; margin:0; width:390px; height:auto; float:left;}
#latest ul{ list-style:none; padding:0; margin:0; width:390px; height:auto;}
#latest ul li{ padding:5px; margin:0; width:390px; height:auto; float:left;}
#latest #wrapper{width:490px; height:auto; float:left; color: #7a7a7a;text-align: left; font-family:Arial, Helvetica, sans-serif; font-size:12px;}
#latest #date{background-color:#f3f3f3; border-top:1px solid #b6b6b6; border-left:1px solid #b6b6b6; border-right:1px solid #b6b6b6; border-bottom:1px solid #b6b6b6; width:70px; height:60px; float:left;}
#latest #content{ float:left; width: 405px; height:auto; margin: 0 0 0 10px;}
#top ul{ list-style:none; padding:0; margin:0; width:390px; height:auto;}
#top ul li{ padding:5px; margin:0; width:390px; height:auto; float:left;}
</style>
<body>
<div id=header>
<div id=wrapper>
<div id=access>
<a href=''>Register</a>
<a href=''>Login</a>
</div>
</div>
</div>
<div id=header2>
<div id=wrapper>
<div id=logo>
<b><font color='#aaaaaf'>X</font>XXX</b>
</div>
<div id=navigation>
<a href=''> X</a>
<a href=''> X</a>
<a href=''> X</a>
<a href=''> X</a>
<a href=''> X</a>
</div>
</div>
</div>
<div id=body>
<div id=leftbox>
<div id=ads>
<div class=title>
ADS
</div>
<ul>
<li><a href=''><img src='' width=160 height=180></a></li>
<li><a href=''><img src='' width=160 height=180></a></li>
<li><a href=''><img src='' width=160 height=180></a></li>
</ul>
</div>
</div>
<div id=midbox>
<div id=latest>
<div class=title>
Latest Album
</div>
<ul>
<li>
<div id='wrapper'>
<div id='date'>
<div class=month><b>JAN</b></div>
<div class=day>01 2013</div>
</div>
<div id='content'>
<b>Happy New Year!</b>
<br>
Wishing you all the blessings of the New Year...the warmth of home, the love of family and the company of good friends.
</div>
</div>
</li>
</ul>
</div>
</div>
<div id=rightbox>
<div id=top>
<div class=title>
Featured DJs
</div>
<ul>
</ul>
</div>
</div>
</div>
<div id=footer>
<div id=footerContent>
<center>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
<br><br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</center>
</div>
</div>
</body>
</html>
最佳答案
一个很常见的问题我的 friend !
当我们 float 元素时，父元素很难跟踪它们的高度。为了让父元素知道它的子元素高度，我们附加了一个“clearfix”。
CSS
.clear { clear: both; }
然后，将该元素追加到 float 元素的同一层。
HTML
<div id="parent">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
<!-- lets clear this shizzle -->
<div class="clear"></div>
</div>
关于CSS 设计 : Three Divs，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15831216/