[英]CSS Design: Three Divs
我想將“ 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=''> X</a>
<a href=''> X</a>
<a href=''> X</a>
<a href=''> X</a>
<a href=''> 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>
</div>
<div id=footer>
<div id=footerContent>
<center>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
<br><br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</center>
</div>
</div>
</body>
</html>
我的朋友一個很常見的問題!
當我們浮動元素時,父元素很難跟蹤它們的高度。 為了使父元素知道其子高度,我們附加了“ 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>
只需添加:
#footer{ clear: both; }
一切都會變得do腫; 無需添加[非語義]更清晰的div。
工作提琴:
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;
}
如果您閱讀這篇有關流量控制的w3文章,它將幫助您理解為什么觸發元素位置以及為什么http://www.w3.org/TR/CSS2/visuren.html#flow-control 。
在文檔中添加元素會影響流程,尤其是在調整屏幕大小,旋轉屏幕等時。
只需在頁腳中添加style =“ clear:both”即可
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.