Common css horizontal adaptive layout_html/css_WEB-ITnose-HTML Tutorial-php.cn

Common css horizontal adaptive layout_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:45:46

Original

1372 people have browsed it

Left and right layout, fixed on the left, adaptive layout on the right

BFC method solution

<!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>

Copy after login

Principle : Add

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

Copy after login

to the left side and use position:absolute; to process

<!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>

Copy after login

Generally, use parent The element is not counted. The parent element generally has a certain width. The absolute layout is relative to the parent dom element. If the relative parent dom element is invalid, you can use the postion: relative of the parent dom element to be relative

This writing method is compatible with ie6 The above version

uses table layout

<!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>

Copy after login

The actual layout of table The implementation principle is also partially set to the characteristics of BFC

display:table imitation table layout

<!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>

Copy after login

css3 solution, mainly Using the flexible box model

<!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>

Copy after login

CSS3 provides us with many cumbersome problems in CSS2. In CSS3, it provides us with the flexible box model. The previous CSS3 tags The version after display:box is flex,

Its characteristics are: add any number of elements in the sub-area, sort them horizontally and vertically, and the sub-elements can set the label flex: 1 to control the percentage, horizontal General settings for tags flex-direction: column This writing method is compatible with the latest version, the old version is box-orient: horizontal