常见css水平自适应布局

左右布局，左边固定，右边自适应布局

BFC方法解决

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>div + css宽度自适应（液态布局）</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <style type="text/css">
        /*左边栏，设定宽度*/
      body,#wrap{
        width: 100%;
        border: 1px yellow;
        }
        .wrap_l
        {
            float: left;
            height: 150px;
            width: 150px;
            border: 1px solid #333;
        }
        /*中间栏，宽度auto,*/
        .wrap_m
        {
            overflow: hidden;
            border: 1px solid #000;
            background: red;
        }
        </style>
</head>
<body>
    <div id="wrap">
         <div class="wrap_l">
            这是左边部分<br />
            这是左边部分<br />
            这是左边部分
        </div>
        <div class="wrap_m">
            这是中间部分
        </div>
    </div>
</body>

</html>

原理：给左侧添加

overflow: hidden;将div改变成BFC模型,display:block;标签的dom的宽度是自适应占满全部的

用position:absolute;处理

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>div + css宽度自适应（液态布局）</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <style type="text/css">
        /*左边栏，设定宽度*/
      body,#wrap{
        width: 100%;
        margin: 0px;
        border: 1px yellow;
        }
        .wrap_l
        {
            float: left;
            height: 150px;
            width: 150px;
            border: 1px solid #333;
        }
        /*中间栏，宽度auto,*/
        .wrap_m
        {
            position:absolute;
            left:152px;
            right: 0px;
            border: 1px solid #000;
            background: red;
        }
        </style>
</head>
<body>
    <div id="wrap">
         <div class="wrap_l">
            这是左边部分<br />
            这是左边部分<br />
            这是左边部分
        </div>
        <div class="wrap_m">
            这是中间部分
        </div>
    </div>
</body>

</html>

　　一般以父元素未计算元素，父元素一般有一定的宽度，绝对布局是相对父dom元素的，如果相对父dom元素无效，可以将父dom元素的postion：relative相对出来

这个写法兼容ie6以上的版本

用table布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>div + css宽度自适应（液态布局）</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <style type="text/css">
        /*左边栏，设定宽度*/
      html,body{
         width: 100%;
         height: 100%
      }
        </style>
</head>
<body>
    <table style="width:100%;height:100%;background:red">
        <tr>
            <td style="background:yellow;width:100px">我是左边</td><td style="background:blue">我是右边</td>
        </tr>
    </table>
</body>

</html>

　　table的布局的其实实现原理也部分设置到BFC的特性

display:table 仿table布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>div + css宽度自适应（液态布局）</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <style type="text/css">
        /*左边栏，设定宽度*/
      html,body{
         width: 100%;
         height: 100%
      }
      #wrap{
        width: 100%;
        height: 50%;
        display: table;
        }
        .wrap_l
        {
            height: 150px;
            width: 150px;
            display: table-cell;
            border: 1px solid #333;
        }
        /*中间栏，宽度auto,*/
        .wrap_m
        {
            display: table-cell;
            border: 1px solid #000;
            background: red;
        }
        </style>
</head>
<body>
    <div id="wrap">
         <div class="wrap_l">
            这是左边部分<br />
            这是左边部分<br />
            这是左边部分
        </div>
        <div class="wrap_m">
            这是中间部分
        </div>
</div>
    <table style="width:100%;height:50%;background:red">
        <tr>
            <td style="background:yellow;width:100px">我是左边</td><td style="background:blue">我是右边</td>
        </tr>
    </table>
</body>
</html>

css3解决方案，主要利用弹性盒模型

<!DOCTYPE html>
<html >
<head>
    <title>div + css宽度自适应（液态布局）</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <style type="text/css">
        /*左边栏，设定宽度*/
      html,body{
         width: 100%;
         height: 100%
      }
      #wrap{
            display: flex;
            width: 100%;
        }
        .wrap_l
        {
            height: 150px;
            width: 150px;
           background: yellow;
        }
        /*中间栏，宽度auto,*/
        .wrap_m
        {
          flex:1;
          background: blue;
        }
        </style>
</head>
<body>
    <div id="wrap">
         <div class="wrap_l">
            这是左边部分<br />
            这是左边部分<br />
            这是左边部分
        </div>
        <div class="wrap_m">
            这是中间部分
        </div>
</div>
</body>
</html>

　　css3给我们提供的很多css2中很多很繁琐的问题，在css3为我们提供了弹性盒模型，之前的css3标签是display:box之后版本为flex，

　　它的特性就是：在子区域内添加任意数量的元素水平和竖直排序，子元素可以设置标签flex：1 控制所占的百分比，水平标签一般设置flex-direction：column 这种写法兼容最新版，老版本的是box-orient：horizontal

posted @ 2015-04-22 20:47 Peter_zhou 阅读(1993) 评论(0) 编辑收藏举报

刷新页面返回顶部

peter_zhou（晴空）

常见css水平自适应布局

公告