转载

关于css布局的一些个人理解。（只是自己理解，不对的地方勿喷）

两列布局（左侧宽度固定，右侧自适应）

例如：

<!doctype html> <html> <head> <title>左部宽度固定，右部自适应</title> <meta charset="utf-8"/> <style type="text/css">  *{   margin:0px;   padding:0px;   font-size:14px;  }  div{   height:600px;  }  .left{   width:300px;   background:red;   float:left;  }  body div.right{   background:green;   margin-left:300px;  } </style>  <link rel="stylesheet" type="text/css" href=""/> </head> <body>  <div class="left">左部</div>  <div class="right">右部</div> </body> </html>

三列布局，（左右宽度固定，中间自适应）；

<!doctype html> <html> <head> <title>左右宽度固定，中间自适应</title> <meta charset="utf-8"/> <style type="text/css">  *{   margin:0px;   padding:0px;   font-size:14px;  }  div{   height:700px;  }  .left{   width:300px;   background:red;   float:left;  }  .right{   width:400px;   background:yellow;   float:right;  }  .center{   background:blue;   margin:0 400px 0 300px;  } </style> </head> <body> <div class="left">左</div> <div class="right">右</div> <div class="center">中</div> </body> </html>

关于css布局的一些个人理解。（只是自己理解，不对的地方勿喷）