2.表格<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
<!--
*{padding:0;margin:0;}
#center,#left,#right{
float:left;
width:100%;
height: 500px;
background-color:#71c9b0;
}
#body{
margin: 0 200px 0 500px;
}
#left{
margin-left: -100%;
width:500px;
background-color:#f7ca8a;
}
#right{
margin-left: -200px;
width:200px;
background-color:#f5917a;
}
-->
</style>
</head>
<body>
<div id="center">
<div id="body">
自适
</div>
</div>
<div id="left">
500px
</div>
<div id="right">
200px
</div>
</body>
</html>
3.浮动<!doctype html>
<html>
<head>
<meta charset="utf-8"3>
<title>table</title>
<style type="text/css">
<!--
table{
border-collapse: collapse;
}
body{
margin: 0px;
}
.left{
width:150px;
height: 500px;
float:left;
background-color:#f7ca8a;
margin: 0px;
}
.center {
height: 500px;
width: 100%;
background-color:#71c9b0;
margin: 0px;
}
.right {
float: right;
width: 200px;
height: 500px;
background-color:#f5917a;
margin: 0px;
}
-->
</style>
</head>
<body>
<table border="1">
<tr>
<td class="left">150px</td>
<td class="center">自适</td>
<td class="right">200px</td>
</tr>
</table>
</body>
</html>
4.绝对定位<!doctype html>
<html>
<head>
<meta charset="utf-8"3>
<title>浮动</title>
<style type="text/css">
#left{
width:150px;
height: 500px;
float:left;
background-color:#f7ca8a;
margin: 0px;
}
#center {
height: 500px;
background-color:#71c9b0;
margin: 0px 200px 0px 150px;
}
#right {
float: right;
width: 200px;
height: 500px;
background-color:#f5917a;
margin: 0px;
}
body{
margin: 0px;
}
</style>
</head>
<body>
<div id="left">150px</div>
<div id="right">200px</div>
<div id="center">自适</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8"3>
<title>绝对定位</title>
<style type="text/css">
body{
margin: 0;
}
#left,#right{
position: absolute;
height: 500px;
top:0px;
}
#left{
left: 0px;
width:150px;
background-color:#f7ca8a;
}
#center {
height: 500px;
background-color:#71c9b0;
margin: 0px 200px 0px 150px;
}
#right {
right: 0px;
width: 200px;
background-color:#f5917a;
}
</style>
</head>
<body>
<div id="left">150px</div>
<div id="center">自适</div>
<div id="right">200px</div>
</body>
</html>