2

「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=''>&nbsp;X</a>
            <a href=''>&nbsp;X</a>
            <a href=''>&nbsp;X</a>
            <a href=''>&nbsp;X</a>
            <a href=''>&nbsp;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>
    &nbsp;
</div>
<div id=footer>
    <div id=footerContent>
        <center>
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

        <br><br>
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        </center>
    </div>
</div>
</body>
</html>
4

4 に答える 4

0

私の友人の非常に一般的な問題です！

要素を浮動させると、親要素がその高さを追跡するのが難しくなります。親要素が子要素の高さを認識できるようにするために、「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>
于 2013-04-05T10:12:31.877 に答える
0

フロー制御に関するこの w3 の記事を読むと、要素の位置をトリガーする理由とhttp://www.w3.org/TR/CSS2/visuren.html#flow-controlの理由を理解するのに役立ちます。

ドキュメントに要素を追加すると、特に画面のサイズ変更や回転などのフローに影響を与えます。

フッターにstyle="clear:both"インラインを追加するだけです

于 2013-05-04T08:44:56.970 に答える