左右动态布局

布局{右边框架浮动(动态显示)/左边框浮动(动态显示)}


右边框代码部分:
<style type="text/css">
#header,#content,#footer{
 background-color:#ccc;
 border:1px solid #0c0;
 height:30px;
 width:80%;
 margin:10px auto;
 }
#content{
 height:500px;
 }
#left{
 height:500px;
 width:100px;
 border:1px red solid;
 float:left;
 background-color:#966;
 
 }
#right{
 height:500px;

 border:1px green solid;
 background-color:#c96;
 }
 

</style>

左边框代码部分:

<style type="text/css">
#header,#content,#footer{
 background-color:#ccc;
 border:1px solid #0c0;
 height:30px;
 width:80%;
 margin:10px auto;
 }
#content{
 height:500px;
 }
#left{
 height:500px;
 width:68%;
 border:1px red solid;
 float:left;
 background-color:#966;
 
 }
#right{
 height:500px;
 width:100px;
 border:1px green solid;
 background-color:#c96;
 float:right;
 }
 

</style>

 

html代码不变

<body>
<div id="header"></div>
<div id="content">
<div id="left"></div>
<div id="right">
lkasdjflkjdflkjsdkfjskdfksdafk fslkdajflksjdflkjsadfl saldfkjsaldfjko;sldkjf sdlfkjsldjfls;kdjfl sdfkjsdfjlsakjdflksadf
</div>

</div>
<div id="footer"></div>


</body>
</html>

posted on 2011-11-04 08:16    阅读(172)  评论(0编辑  收藏  举报