读书人

div left middle right 在DW8里面散架

发布时间: 2012-03-16 16:34:56 作者: rapoo

div left middle right 在DW8里面散架了 求大神指点
<div id="main">
<div id="left">
此处显示 id "left" 的内容</div>

<div id="middle">
此处显示 id "middle" 的内容</div>

<div id="right">
此处显示 id "right" 的内容</div>

此处显示 id "main" 的内容</div>





body {
margin: 0px;
padding: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
text-align: center;
}
#top {
height: 90px;
width: 940px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#main {
text-align: left;
width: 940px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
clear: both;
}
#left {
text-align: left;
width: 140px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
float: left;
}
#middle {
text-align: left;
width: 700px;
float: left;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
float: left;
height: 400px;
}
#right {
float: right;
width: 100px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
float: left;
}


[解决办法]
<div id="top"></div>
<div id="main">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
<div class="clear"></div>
</div><!-- main end -->



body {
margin: 0px;
padding: 0px;
}
#top {
width: 940px;
height: 90px;
margin:0 auto;
}
#main {
width: 940px;
margin:0 auto;
}

#left {
float: left;
width: 140px;
}
#middle {
float: left;
width: 700px;
}
#right {
float: right;
width: 100px;
}
.clear { clear:both;}

[解决办法]
楼上正解,或者是按照你的CSS不变,但是把HTML结构改成这样

HTML code
<div id="container">    <div id="left">此处显示 id "left" 的内容</div>    <div id="middle">此处显示 id "middle" 的内容</div>    <div id="right">此处显示 id "right" 的内容</div>    <div id="main">此处显示 id "main" 的内容</div></div> 

读书人网 >CSS

热点推荐