Question

我有一个网站的一部分，其中有三个div彼此相邻。然后在那些下面，还有另一个div。然而，在三个浮动div下面的div显示在页面顶部。我该怎么做才能将div放在三个浮动div之下？

有问题的div是名为footer的那个

HTML：

 <div id="bodyholder"> 
 <div id="leftholder">
 Welcome to the website.... <br>
 <br style="line-height:10px">
 <img src="images/1_p1.jpg" align="left" style="margin-right:19px" alt="" border="0">
 <br>Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor.     <br>
 <br style="line-height:40px">
 Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque      laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi      architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia.                             
 </div>
<div id="middleholder">
<img src="images/p1.png" alt="Statistics"/>
<img src="images/p2.png" alt="Schoolwork"/>
<img src="images/p3.png" alt="In the News"/>
</div>
 <div id="rightholder">
 Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque      laudantium, totam rem aperiam, eaque ipsa quae.<br>
 <br style="line-height:10px">
 <img src="images/1_p1.jpg" align="left" style="margin-right:19px" alt="" border="0">
 <br>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque.<br>
 <br style="line-height:40px">
 Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil      molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? quis      nostrum exercitationem ullam vel eum iure reprehenderi.                            
 </div>
    <div id="footer">
            <div id="footerinner">                                             
    <div class="vlinks">vel eum iure reprehenderi</div>
            </div>
    </div>



 </div> 
 </div> 

 </body>
 </html>

和css

 body {
padding:0;
margin:0;
background-image: url(images/background.gif);
background-repeat: repeat;
background-position: center top;
font-size:12px;
    font-family:Verdana;
color:#FFFFFF;
line-height:14px;
vertical-align:top;

 }
 #top{
 width: 766px;  

 }

 #fullholder{
margin: 0 auto;
width:766px;
height:100%;
border-width: 1px;
border-style: solid;
border-color: #fff;
background-color: #000;

 }
 #nav{
background-color: #000;
height:84px;
 }

 ul#list-nav {
list-style:none;
padding:0;
width:764px;
height: 84px;
margin-left: 2px;
margin-top: 0px;
 }

 ul#list-nav li {
display:inline;

 }

 ul#list-nav li a {
text-decoration:none;
font-weight:bold;
font:24px "Times New Roman", Times, serif;
line-height:78px;
text-align:center
    list-style-type:none;
padding-top:2px;
padding-bottom:2px;
width:125px;
background:#b99757;
color:#FFFFFF;
float:left;
text-align:center;
border:1px solid #fff;
 }

 ul#list-nav li a:hover {
background:#a2abb2;
color:#000
 }

 #list-nav #menu_active a{
 background:#a2abb2;
 color:#000;
 }


 #bodyholder{
border-left-width: 1px;
border-left-style: solid;
border-left-color: #fff;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #fff;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #000;
margin-left:2px;
width:760px;
height:470px;
background-image: url(images/1_bg.gif);
background-repeat: repeat-x;
 }

 #leftholder{
float: left;
margin-top: 5px;
margin-left: 5px;
border:10px solid #A2ABB2;
padding:10px 20px;
background:#000000;
width:215px;
height:354px;
border-radius:25px;
-moz-border-radius:25px;    
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color: #FFF;
display:block;
 }

 #middleholder
 {
float: left;
margin-top: 5px;
margin-left: 8px;   
width:191px;
height:354px;   
display:block;
 }

 #rightholder{
float: left;
margin-top: 5px;
margin-left: 1px;
border:10px solid #A2ABB2;
padding:10px 20px;
background:#000000;
width:215px;
height:354px;
border-radius:25px;
-moz-border-radius:25px;    
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color: #FFF;
display:block;
 }

 #rightholdertwo{
float: left;
margin-top: 5px;
margin-left: 1px;
border:10px solid #A2ABB2;
padding:10px 20px;
background:#000000;
width:215px;
height:354px;
border-radius:25px;
-moz-border-radius:25px;    
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color: #FFF;
display:block;
 }
 #leftholdertwo{
float: left;
margin-top: 5px;
margin-left: 5px;
border:10px solid #A2ABB2;
padding:10px 20px;
background:#000000;
width:215px;
height:354px;
border-radius:25px;
-moz-border-radius:25px;    
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color: #FFF;
display:block;
 }

 #footer{
width: 760px;
background-color:#000000;
height: 55px;
font-family:Tahoma;
font-size:14px;


 } 
 #footerinner{
-moz-border-radius: 15px;
border-radius: 15px;
width: 734px;
height: 28px;
font-family:Tahoma;
font-size:14px;
background-color: #A2ABB2;
margin: 0 auto;
padding-left: 15px;
padding-top:11px;
color: #000;
 }

有什么想法吗？有人可以发布id需要更改以使其工作的CSS吗？而且我不想只使用400px的margin-top ...我希望它实际上是在它下面格式化的（尝试修复它）。有什么建议吗？

Answer 1

你没有从它上面漂浮的div中清除你的页脚，所以这就是你的页脚显示在顶部的原因。我已经清理了你的页脚，它现在工作正常：

#footer{
    width: 760px;
    background-color:#000000;
    height: 55px;
    font-family:Tahoma;
    font-size:14px;
    clear:both;
}

我希望你能找到像这样的东西：http://jsbin.com/avaheg/5/edit

Answer 2

设置您的页脚div的样式，如下：

clear: both;

如果您将其定位为绝对值，请将定位更改为position: relative;;

在此处查看效果：http://jsfiddle.net/KnK9W/

格式化三个浮动div下的div

2 个答案: