我做出来的是这样的，这是为什么啊？
#div-middle-02 {
float: left;
background-color: #fff9ca;
width: 100%;
height: 50px;
}
#middle-wrap-02 {
margin: 0 200px 0 150px;
}
#div-left-02 {
float: left;
position: relative;
background-color: red;
width: 150px;
margin-left: -100%;
height: 50px;
}
#div-right-02 {
float: left;
position: relative;
background-color: yellow;
width: 200px;
margin-left: -200px;
height: 50px;
}
这是我看别人的代码，为什么要margin-left:-100%;为什么要使用负边距，还有..为什么要定位，<div id="div-middle-02">
<div id="middle-wrap-02"><span>div-middle</span></div>
</div>为什么这个DIV里要再加一个是什么意思，#middle-wrap-02 {
margin: 0 200px 0 150px;
这个又为什么要加........我问题描述的很乱...求大家详细的指点我
}
..
6 个解决方案
#1
双飞翼布局是什么东东？是左右两栏式布局？
#2
利用display:table和display:table-cell
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1, user-scalable=no, minimal-ui" >
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>two cell layer</title>
<style type="text/css">
body {width:100%;height:auto;}
body {font:14px/1.6 Tahoma,microsoft yahei,"微软雅黑","宋体";color:#666;}
body,dl,dd,dt,h2,h1,h3,p,ul,li,strong,img,button, input, textarea{margin:0;padding:0}
/*框架*/
#sitepage{display:table;width:100%}
#left_navi,#right_body{display:table-cell;vertical-align:top;height:600px}
#left_navi{background-color: #3C4852;}
#right_body{background-color:#ddd}
.w270{width:270px;}
</style>
</head>
<body>
<div id="sitepage">
<div id="left_navi" class="w270"> </div>
<div id="right_body"> </div>
</div></body></html>
#3
不是啊，是左右固定宽高，中间自适应
#4
<style>
.left {
float : left;
width : 150px;
height : 50px;
background : green;
}
.right {
float : right;
width : 150px;
height : 50px;
background : blue;
}
.main {
height : 50px;
background : orange;
}
</style>
<div class=left>左边</div>
<div class=right>右边</div>
<div class=main>中间</div>
#5
将我写的两栏一改就可以！我写的是左固定宽你在加一栏右固定宽，
#6
楼主的代码我觉得没问题，但不知道为什么显示错误，应该是左右两栏遮住了一部分本属于中间的，然后中间内部再建立div，margin-left,margin-right给两边空间。
#1
双飞翼布局是什么东东？是左右两栏式布局？
#2
利用display:table和display:table-cell
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1, user-scalable=no, minimal-ui" >
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>two cell layer</title>
<style type="text/css">
body {width:100%;height:auto;}
body {font:14px/1.6 Tahoma,microsoft yahei,"微软雅黑","宋体";color:#666;}
body,dl,dd,dt,h2,h1,h3,p,ul,li,strong,img,button, input, textarea{margin:0;padding:0}
/*框架*/
#sitepage{display:table;width:100%}
#left_navi,#right_body{display:table-cell;vertical-align:top;height:600px}
#left_navi{background-color: #3C4852;}
#right_body{background-color:#ddd}
.w270{width:270px;}
</style>
</head>
<body>
<div id="sitepage">
<div id="left_navi" class="w270"> </div>
<div id="right_body"> </div>
</div></body></html>
#3
不是啊，是左右固定宽高，中间自适应
#4
<style>
.left {
float : left;
width : 150px;
height : 50px;
background : green;
}
.right {
float : right;
width : 150px;
height : 50px;
background : blue;
}
.main {
height : 50px;
background : orange;
}
</style>
<div class=left>左边</div>
<div class=right>右边</div>
<div class=main>中间</div>
#5
将我写的两栏一改就可以！我写的是左固定宽你在加一栏右固定宽，
#6
楼主的代码我觉得没问题，但不知道为什么显示错误，应该是左右两栏遮住了一部分本属于中间的，然后中间内部再建立div，margin-left,margin-right给两边空间。