css - CSS 设计：三个 div

Question

我想将“leftbox”“midbox”和“rightbox”div 并排排列。当我使用浮动：左，我的页脚到顶部。

任何人都可以帮助我，所以我可以让它们彼此相邻排列，而我的页脚仍然在下部。

任何人都想更改我的代码，使其尺寸变小。

这是我的代码。

<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>

score 0 · Accepted Answer

一个很常见的问题我的朋友！

当我们浮动元素时，父元素很难跟踪它们的高度。为了让父元素知道它的子元素高度，我们附加了一个“clearfix”。

CSS

.clear { clear: both; }

然后，将该元素附加到浮动元素的同一级别。

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>

score 0 · Accepted Answer

只需添加：

#footer{ clear: both; }

一切都将是笨拙的；无需添加 [非语义] 更清晰的 div。

score 0 · Accepted Answer

工作小提琴：

http://jsfiddle.net/eBH9M/3/

HTML：

<div id="wrapper">
    <div id="left">

    </div>
    <div id="center">

    </div>
    <div id="right"></div>
    <div class="clear"></div>
</div>

CSS：

#left, #right, #center{

    float: left;
    height: 50px;
    width: 30%;
}

.clear{
    clear: both;
}

#footer{
    width: 100%;
    height: 40px;
}

score 0 · Accepted Answer

如果您阅读这篇关于流控制的 w3 文章，它将帮助您理解为什么触发元素位置以及为什么http://www.w3.org/TR/CSS2/visuren.html#flow-control。

在文档中添加元素会对流程产生影响，尤其是在调整屏幕大小、旋转等时。

只需将style="clear:both"内联添加到您的页脚

css - CSS 设计：三个 div

4 回答 4

Related

Reference