1

我有一个网站的一部分，其中有三个相邻的 div。然后在这些之下，还有另一个 div。但是，位于三个浮动 div 下方的 div 显示在页面顶部。如何使 div 位于三个浮动 div 下方？

有问题的 div 是称为页脚的 div

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 ...我希望它实际上被格式化（试图像那样修复它）。有什么建议么？

4

2 回答 2

3

您没有从其上方的浮动 div 中清除页脚，这就是为什么您的页脚显示在顶部的原因。我已经清除了你的页脚，现在工作正常：

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

我希望你正在寻找这样的东西：http: //jsbin.com/avaheg/5/edit

于 2012-06-29T05:50:31.583 回答
2

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

clear: both;

并将定位更改为position: relative;如果您将其定位为绝对；

在这里查看效果：http: //jsfiddle.net/KnK9W/

于 2012-06-29T05:48:20.053 回答