四种布局（1）、左右两侧，左侧固定宽度200px，右侧自适应占满。（2）、左中右三列，左右个200px固定，中间自适应占满。（3）、上中下三行，头部200px高，底部200px高，中间自适应占满。（4）、上下两部分，底下这个固定高度200px，如果上面的内容少，那么这个footer就固定在底部，如果内容多，就把footer挤着往下走。一、第一种图片如下：（左右两侧，左侧固定宽度200px，右侧自适应占满）代码如下：<!doctype html><html> <head> <meta charset="utf-8"/> <title>布局1</title> <link rel="stylesheet" href="dio.css"/> </head> <body> <div class="first"></div> <div class="second"></div> </body></html>.first,.second{height:100px;}.first{ width:200px; background-color:yellow; float:left; }.second{ background-color:red; position:absolute; right:0px; left:200px; width:100%;}x二、第二种图片如下：（上中下三行，头部200px高，底部200px高，中间自适应占满）代码如下：<!doctype html><html> <head> <meta charset="utf-8"/> <title>布局2</title> <link rel="stylesheet" href="dio2.css"/> </head> <body> <div class="left"></div> <div class="center"></div> <div class="right"></div> </body></html>.left,.center,.right{height:400px;}.left{ width:200px; background-color:yellow; float:left; }.center{ background-color:red; position:absolute; right:200px; left:200px; }.right{ width:200px; float:right; background-color:green; }三、第三种图片如下：上中下三行，头部200px高，底部200px高，中间自适应占满代码如下：<!doctype html><html> <head> <meta charset="utf-8"/> <title>布局3</title> <link rel="stylesheet" href="dio3.css"/> </head> <body> <div class="top"></div> <div class="center"></div> <div class="bottom"></div> </body></html>body{margin:0px;}.top{ width:100%; height:200px; position:absolute; background:red;} .center{ width:100%; position:absolute; background:blue; top:200px; bottom:200px;} .bottom{ width:100%; height:200px; position:absolute; bottom:0px; background:black;} 四、第四种图片如下：上下两部分，底下这个固定高度200px，如果上面的内容少，那么这个bottom就固定在底部，如果内容多，就把bottom挤着往下走。代码如下：<!doctype html><html> <head> <meta charset="utf-8"/> <title>布局4</title> <link rel="stylesheet" href="dio4.css"/> </head> <body> <div class="top"> aijefoaiejfoaiejfaio<br/> ........ </div> <div class="bottom"></div></body></html>html{ height:100%;}body{ margin:0px; min-height:100%; position:relative; background:red;}.top{ padding-bottom:300px; }.bottom{ position:absolute; width:100%; height:200px; background:black; bottom:0px; left:0px;}若有错误请及时通知
