两列布局，一边固定，一边自适应，很常见，可不见得都能写好，就像我。
在一通搜索后，总结了几种方法。
1、CSS3 Flex-Box
其实我最早知道的是这种方法，之前也记录过。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.main,.sitebar {
height: 300px;
font: bolder 20px/300px ‘微软雅黑‘;
color: #fff;
text-align: center;
}
.main {
width: 100%;
float: left;
}
.main .content {
margin-left: 200px;
background-color: red;
}
.sitebar {
width: 200px;
float: left;
margin-left: -100%;
background-color: green;
}
</style>
</head>
<body>
<div class="main">
<div class="content">右侧主体自适应区块</div>
</div>
<div class="sitebar">左侧定宽200px区块</div>
</body>
</html>
效果：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>两列高度自适应</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
#main {
overflow:hidden;
text-align: center;
height: 300px;
}
.sidebar {
float:left;
width:150px;
background:#ff0000;
}
.content {
background:#333333;
overflow:hidden;
_float:left;/*兼容IE6*/}
.row {
margin-bottom:-10000px;
padding-bottom:10000px;/*内外补丁是关键*/
}
</style>
</head>
<body>
<div id="main">
<div class="sidebar row">
左侧150px
</div>
<div class="content row">
右侧自适应
<span style="float:right; font-size:0; position:relative; "> </span> <!--为了万恶的ie6-->
</div>
</div>
</body>
</html>
效果：
时间： 2024-10-16 03:14:01