当前位置：首页 → 问答吧 → 结构上中下，float后不剧中。

结构上中下，float后不剧中。

时间：2011-10-17

来源：互联网

格式如下：
HTML code


<div class="main">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>

css样式如下：
CSS code


.main{
margin:auto;
width:1000px;
background-color:#FFFFFF;
zoom:1;
overflow:hidden;
}
.top{
width:930px;
margin:auto;
height:135px;
border-color:red #FF0000 #CCCCCC; 
border-style:solid solid dashed;
border-width:1px 1px 2px;
}
.middle{
width:930px;
border-color:red;
border-style:solid;
border-width:0px 1px 1px;
margin:auto;
}
.bottom{
height:100px;
width:930px;
margin:auto;
border-color:#FF0000;
border-style:solid;
border-width:0px 1px 1px;
background-image:url(picture/Bottom.jgp);
}

是这样，我的top和bottom都是定高，中间的middle呢是根据内容大小自适应，但是我的bottom会忽略middle而顶上去，我加过float，但加了以后全都是居左，不能剧中了啊，求高手帮忙！
（在不加float的情况下，我的middle连边框都不显示，按说里面有内容可以撑开就应该能显示啊）

作者: xiaozhumt 发布时间: 2011-10-17

margin那个我建议你改成margin:0 auto;这样左右就能居中

作者: zhoufeng0401 发布时间: 2011-10-17

引用 1 楼 zhoufeng0401 的回复:

margin那个我建议你改成margin:0 auto;这样左右就能居中

貌似无果。

作者: xiaozhumt 发布时间: 2011-10-17

全部设置了float 全部设置了margin-left:35px; 为什么不能自适应，依旧等待求解！

问题在于我的middle没有定高，top和bottom有定高。

作者: xiaozhumt 发布时间: 2011-10-17

HTML code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.main{
margin:auto;
width:1000px;
background-color:#FFFFFF;
zoom:1;
overflow:hidden;
}
.top{
width:930px;
margin:auto;
height:135px;
border-color:red #FF0000 #CCCCCC; 
border-style:solid solid dashed;
border-width:1px 1px 2px;
}
.middle{
width:930px;
border-color:red;
border-style:solid;
border-width:0px 1px 1px;
margin:auto;
}
.bottom{
height:100px;
width:930px;
margin:auto;
border-color:#FF0000;
border-style:solid;
border-width:0px 1px 1px;
background-image:url(picture/Bottom.jgp);
}
</style>

</head>

<body>
<div class="main">
<div class="top">abc</div>
<div class="middle">abc</div>
<div class="bottom">abc</div>
</div>



</body>
</html>