CSS两列自适应布局

浏览数：91 / 时间：2015年06月09日

两列布局，一边固定，一边自适应，很常见，可不见得都能写好，就像我。

在一通搜索后，总结了几种方法。

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>

效果：

3、来自经典DIV+CSS案例--两列高度自适应

代码：

<!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; ">&nbsp;</span> <!--为了万恶的ie6-->
    </div>

</div>

</body>
</html>