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结构改成这样
<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>