cari

Rumah >hujung hadapan web >html tutorial >常见css水平自适应布局_html/css_WEB-ITnose

常见css水平自适应布局_html/css_WEB-ITnose

WBOY
WBOYasal
2016-06-24 11:45:461349semak imbas

  • 左右布局，左边固定，右边自适应布局
    1. 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的宽度是自适应占满全部的
    2. 用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以上的版本

    1. 用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的特性

    1. 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>

    2. 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

     

     

    Kenyataan：
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
    Artikel sebelumnya：UIWebView与javascript交互三通过OC页面来改变html页面上的值_html/css_WEB-ITnoseArtikel seterusnya：【CSS3】-background-origin background-clip background-size_html/css_WEB-ITnose

    Artikel berkaitan

    Lihat lagi