标签：
俩列布局(左边固定，右边自适应):
1、
<!DOCTYPE html>
<html>
<head>
<title>俩列布局</title>
<meta charset="utf-8">
<style type="text/css">
*{ margin: 0; padding: 0; }
#left { float: left; width: 220px; background-color: green; }
#content { background-color: orange; margin-left: 220px;/*==等于左边栏宽度==*/ }
</style>
</head>
<body>
<div id="left">Left sidebar</div>
<div id="content">Main Content</div>
</body>
</html>
2、
<!DOCTYPE html>
<html>
<head>
<title>俩列布局</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#left {
background-color: green;
float: left;
width: 220px;
margin-right: -100%;
}
#content {
float: left;
width: 100%;
}
#contentInner {
margin-left: 220px;/*==等于左边栏宽度值==*/
background-color: orange;
}
</style>
</head>
<body>
<div id="left">
Left Sidebar
</div>
<div id="content">
<div id="contentInner">
Main Content
</div>
</div>
</body>
</html>
等高布局：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>高度自适应布局</title>
<style>
body{ padding:0; margin:0; color:#f00; }
.container{ margin:0 auto; width:600px; border:3px solid #00C; overflow:hidden; }
.left{ float:left; width:150px; background:#B0B0B0; padding-bottom:9999px; margin-bottom:-9999px; }
.right{ float:left; width:450px; background:#6CC; padding-bottom:9999px; margin-bottom:-9999px; }
</style>
</head>
<body>
<div class="container">
<div class="left">我是left</div> <div class="right">我是right<br><br><br>现在我的高度比left高，但left用它的padding-bottom补偿了这部分高度</div> </div>
</body>
</html>
俩列布局(左边固定，右边自适应)，等高布局，最小高度：
<!DOCTYPE html> <html> <head> <title>My Page</title> <meta charset="utf-8"> <style type="text/css"> *{ margin: 0; padding: 0; } #div1{ overflow: hidden; min-height: 200px; height: auto !important; height: 200px;/*设置最小高度*/ } #left { float: left; width: 220px; background-color: green; padding-bottom: 9999px; margin-bottom: -9999px; } #content { background-color: orange; margin-left: 220px;/*==等于左边栏宽度==*/ padding-bottom: 9999px; margin-bottom: -9999px; } </style> </head> <body> <div id="div1"> <div id="left">Left sidebar Main ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain Conten ContentMain ContentMain ContentMainContent</div> <div id="content">Main Content</div> </div> </body> </html>
标签：
原文地址：http://www.cnblogs.com/pcd12321/p/4780593.html
