Div+CSS左侧尺寸固定右侧自适应布局的5种实现方法

css多栏自适应布局一般使用position属性布局，或者用float属性布局，也可以使用display属性。

position适合首页布局，因为首页内容往往可以完全控制。float适合模板布局，模板中填充的内容无法控制。

相关阅读：左侧固定，右侧自适应布局的两种实现方法

1、浮动实现

原理：左侧定宽浮动，右侧使用margin-left，且不要定宽，容器尺寸变化右侧可自适应

<!DOCTYPE html>

<html>

<head>

.left {

width: 150px;

float: left;

background-color: pink;

}

/*流体布局*/

.right {

margin-left: 150px;

background-color: green;

}

</style>

</head>

<body>

左侧内容固定---------左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左

</div>

右侧内容自适应----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右

</div>

</body>

</html>

<!DOCTYPE html> <meta charset="utf-8"/> <html> <head> <title></title> <style type="text/css"> .left { width: 150px; float: left; background-color: pink; } /*流体布局*/ .right { margin-left: 150px; background-color: green; } </style> </head> <body> <div class="left"> 左侧内容固定---------左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左 </div> <div class="right"> 右侧内容自适应----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右 </div> </body> </html>

<!DOCTYPE html>
<meta charset="utf-8"/>
<html>
<head>
    <title></title>
    <style type="text/css">
.left {
    width: 150px;
    float: left;
    background-color: pink;
}

/*流体布局*/
.right {
    margin-left: 150px;
    background-color: green;
}
  </style>
</head>
<body>
    <div class="left">
        左侧内容固定---------左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左
    </div>
    <div class="right">
        右侧内容自适应----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右
    </div>
</body>
</html>

2、绝对定位实现

原理：重点是container设置padding-left给left腾出空间，left相对于containr绝对定位，right占满剩余空间。

<!DOCTYPE html>

<html>

<head>

<title>2 columns layout of starof</title>

.container {

width: 100%;

position: relative;

padding-left: 150px;

}

.left {

width: 150px;

position: absolute;

left: 0;

background-color: pink;

}

/*流体布局*/

.right {

width: 100%;

background-color: green;

}

</style>

</head>

<body>

左侧内容 <strong>固定</strong>

---------左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左

</div>

右侧内容 <strong>自适应</strong>

----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右

</div>

</body>

</html>

<!DOCTYPE html> <meta charset="utf-8"/> <html> <head> <title>2 columns layout of starof</title> <style type="text/css"> .container { width: 100%; position: relative; padding-left: 150px; } .left { width: 150px; position: absolute; left: 0; background-color: pink; } /*流体布局*/ .right { width: 100%; background-color: green; } </style> </head> <body> <div class="container"> <div class="left"> 左侧内容 <strong>固定</strong> ---------左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左 </div> <div class="right"> 右侧内容 <strong>自适应</strong> ----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右 </div> </div> </body> </html>

<!DOCTYPE html>
<meta charset="utf-8"/>
<html>
<head>
    <title>2 columns layout of starof</title>
<style type="text/css">
.container {
    width: 100%;
    position: relative;
    padding-left: 150px;
}
.left {
    width: 150px;
    position: absolute;
    left: 0;
    background-color: pink;
}

/*流体布局*/
.right {
    width: 100%;
    background-color: green;
}
</style>
</head>
<body>
    <div class="container">
        <div class="left">
            左侧内容 <strong>固定</strong>
            ---------左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左
        </div>
        <div class="right">
            右侧内容 <strong>自适应</strong>
            ----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右
        </div>
    </div>
</body>
</html>

3、BFC实现

原理：左栏定宽浮动，右栏生成BFC，根据BFC特性，与浮动元素相邻的，创建了BFC的元素，都不能与浮动元素相互覆盖。

<!DOCTYPE html>

<html>

<head>

<title>2 columns layout of starof</title>

.left {

width: 150px;

float: left;

background-color: pink;

}

/*流体布局*/

.right {

display: table-cell;

background-color: green;

}

</style>

</head>

<body>

左侧内容 <strong>固定</strong>

</div>

右侧内容 <strong>自适应</strong>

</div>

</body>

</html>

<!DOCTYPE html> <meta charset="utf-8"/> <html> <head> <title>2 columns layout of starof</title> <style type="text/css"> .left { width: 150px; float: left; background-color: pink; } /*流体布局*/ .right { display: table-cell; background-color: green; } </style> </head> <body> <div class="left"> 左侧内容 <strong>固定</strong> ---------左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左 </div> <div class="right"> 右侧内容 <strong>自适应</strong> ----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右 </div> </body> </html>

<!DOCTYPE html>
<meta charset="utf-8"/>
<html>
<head>
    <title>2 columns layout of starof</title>
<style type="text/css">
.left {
    width: 150px;
    float: left;
    background-color: pink;
}

/*流体布局*/
.right {
    display: table-cell;
    background-color: green;
}
</style>
</head>
<body>
        <div class="left">
            左侧内容 <strong>固定</strong>
            ---------左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左
        </div>
        <div class="right">
            右侧内容 <strong>自适应</strong>
            ----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右
        </div>
</body>
</html>

4、table实现

<!DOCTYPE html>

<html>

<head>

<title>2 columns layout of starof</title>

.container {

width: 100%;

display: table;

}

.left {

width: 150px;

display: table-cell;

background-color: pink;

}

.right {

display: table-cell;

background-color: green;

}

</style>

</head>

<body>

左侧内容 <strong>固定</strong>

</div>

右侧内容 <strong>自适应</strong>

</div>

</body>

</html>

<!DOCTYPE html> <meta charset="utf-8"/> <html> <head> <title>2 columns layout of starof</title> <style type="text/css"> .container { width: 100%; display: table; } .left { width: 150px; display: table-cell; background-color: pink; } .right { display: table-cell; background-color: green; } </style> </head> <body> <div class="container"> <div class="left"> 左侧内容 <strong>固定</strong> ---------左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左 </div> <div class="right"> 右侧内容 <strong>自适应</strong> ----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右 </div> </div> </body> </html>

<!DOCTYPE html>
<meta charset="utf-8"/>
<html>
<head>
    <title>2 columns layout of starof</title>
<style type="text/css">
.container {
    width: 100%;
    display: table;
}
.left {
    width: 150px;
    display: table-cell;
    background-color: pink;
}
.right {
    display: table-cell;
    background-color: green;
}
</style>
</head>
<body>
    <div class="container">
        <div class="left">
            左侧内容 <strong>固定</strong>
            ---------左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左
        </div>
        <div class="right">
            右侧内容 <strong>自适应</strong>
            ----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右
        </div>
    </div>
</body>
</html>