1

3つのdivが隣り合っているWebサイトのセクションがあります。次に、それらの下に別のdivがあります。ただし、3つのフロートdivの下にあるdivがページの上部に表示されています。divが3つのフロート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;
}

私はあなたがこのようなspmethingを探していることを願っています：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 に答える