这个问题需要把left和right再使用一个div包含起来,直接上代码啦,下边就可以实现你要求的布局。foot总在下边,并能随着left,right的高度改变自动调整。
<div id="box">
<div id="content">
<div id="left">这里是页面的左部分内容</div>
<div id="right">这里是页面的右部分内容</div>
</div>
<div id="foot">这里是放页尾的版权信息等的</div>
</div>
/******css样式**/
<style type="text/css">
#content{
width: 100%
background: aqua
overflow: auto
}
#left{
width:50%
float: left
height:250px
background: blue
}
#right{
width:50%
float: right
height:100px
background: fuchsia
}
#foot{
height: 30px
background: gray
}
</style>
<div id="footer" class="clear">//html改动部分<style type="text/css">
* {
padding: 0px
margin: 0px
}
body{
width:953px
margin:0 auto}
#top {
background-color: #000000
font-size: 24px
font-weight: bold
text-align: center
color: #FF0000
height: 30px
padding: 5px
}
#main {
background-color: #99CC00
color: #000099
top: 90px
}
#main_lift {
background-color: #996633
width: 380px
float: left
padding: 10px
}
#main_right {
background-color: #996699
width: 528px
float: right
padding: 10px
}
#footer {
background-color: #66FF00
font-size: 24px
color: #336633
width: 963px
margin-top: 0px
height: 84px
}
h3 {
font-size: 36px
}
.clear{
clear:both
}
</style>
css部分
这样就可以了,一定要给分啊~
<style type="text/css">body{text-align:center}
.leftgn2{ width:200pxheight:200pxbackground:#FF0000float:left}
.rightgn2{ width:200pxheight:200pxbackground:#00FF00float:left}
</style>
</head>
<body>
<div class="leftgn2">
<!--<img src="images/qianli.jpg">-->
</div>
<div class="rightgn2">
<!--<img src="images/qianli.jpg" >-->
</div>
</body>
你看看这样写行吗