div+css布局错乱问题解决方法

html-css018

div+css布局错乱问题解决方法,第1张

div是一种分块机制,这就要求在设计页面时要弄清各块之间级联关系

这个问题需要把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>

你看看这样写行吗