css常见自适应布局_html/css_WEB-ITnose-html tutorial-php.cn

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

WBOY

Lepaskan： 2016-06-24 11:30:25

asal

1147 orang telah melayarinya

1.两列布局，左侧宽度固定，右侧宽度自适应

1.1.左侧进行浮动，右侧设置margin-left

/*    1.利用浮动进行布局*/    .left {        float: left;        width: 200px;        height: 200px;        background-color: cornflowerblue;    }    .right {        margin-left: 200px;        height: 200px;        background-color: bisque;    }    <div class="left"></div>    <div class="right"></div>

Salin selepas log masuk

1.2.利用绝对定位来代替浮动

/*    2.利用绝对定位进行布局*/    .wrap {        position: relative;    }    .left {        position: absolute;        top: 0;        left: 0;        width: 200px;        height: 200px;        background-color: cornflowerblue;    }    .right {        margin-left: 200px;        height: 200px;        background-color: bisque;    }    <div class="wrap">        <div class="left"></div>        <div class="right"></div>    </div>

Salin selepas log masuk

2.两列布局，右侧宽度固定，左侧宽度自适应

2.1.利用浮动进行布局

/*    1.利用浮动进行布局*/    .left {        margin-right: 200px;        height: 200px;        background-color: cornflowerblue;    }    .right {        float: right;        width: 200px;        height: 200px;        background-color: bisque;    }    <div class="right"></div>    <div class="left"></div>

Salin selepas log masuk

注：right要写在left的前面，否则会出现如下问题。然后百度了下，终于找到了如下一段话（首先要明白浮动元素只对后面元素有影响，浮动元素本身并不浮动，只是脱离文档流，后面的元素会上移而占据浮动元素的位置。所以按你说的话，就要利用负边距把浮动元素拉高才能完成。）。

2.2.利用绝对定位进行布局

/*    2.利用绝对定位进行布局*/    .wrap {        position: relative;    }    .left {        margin-right: 200px;        height: 200px;        background-color: cornflowerblue;    }    .right {        position: absolute;        top: 0;        right: 0;        width: 200px;        height: 200px;        background-color: bisque;    }    <div class="wrap">        <div class="left"></div>        <div class="right"></div>    </div>

Salin selepas log masuk

3.三列布局，中间宽度固定，两侧宽度自适应

/*    1.常规实现方式*/    .left,    .right {        width: 50%;        height: 200px;        background-color: cornflowerblue;    }    .left {        margin-left: -300px;        float: left;    }    .right {        margin-right: -300px;        float: right;    }    .center {        margin: 0 auto;        width: 600px;        height: 200px;        background-color: bisque;    }    <div class="right"></div>    <div class="left"></div>    <div class="center"></div>

Salin selepas log masuk

4.三列布局，中间宽度自适应，两侧宽度固定

4.1.利用浮动实现

/*    1.浮动实现方式*/        .left,        .right {            width: 300px;            height: 200px;            background-color: cornflowerblue;        }        .left {            float: left;        }        .right {            float: right;        }        .center {            margin: 0 300px;            height: 200px;            background-color: bisque;        }        <div class="right"></div>    <div class="left"></div>    <div class="center"></div>

Salin selepas log masuk

4.2.利用绝对定位实现

/*    2.绝对定位方式实现*/        .left,        .right {            position: absolute;            top: 0;            width: 300px;            height: 200px;            background-color: cornflowerblue;        }        .left {            left: 0;        }        .right {            right: 0;        }        .center {            margin: 0 300px;            height: 200px;            background-color: bisque;        }        <div class="right"></div>        <div class="left"></div>        <div class="center"></div>

Salin selepas log masuk

<strong>5.两列，左右等高显示</strong>

Salin selepas log masuk

        .wrap {            overflow: hidden;        }        .left,        .right {            margin-bottom: -10000px;            padding-bottom: 10000px;        }        .left {            background-color: cornflowerblue;        }        .right {            float: right;            width: 400px;            background-color: bisque;        }        <div class="wrap">        <div class="right">            <p>10. 是否忘记了写DTD?</p>            <p>10. 是否忘记了写DTD?</p>            <p>10. 是否忘记了写DTD?</p>            <p>10. 是否忘记了写DTD?</p>定width属性。另外指定元素时尽量使用em而不是px做单位。</p>            <p>10. 是否忘记了写DTD?</p>            <p>10. 是否忘记了写DTD?</p>            <p>10. 是否忘记了写DTD?</p>            <p>10. 是否忘记了写DTD?</p>            <p>10. 是否忘记了写DTD?</p>定width属性。另外指定元素时尽量使用em而不是px做单位。</p>        </div>        <div class="left">            <p>10. 是否忘记了写DTD?</p>            <p>10. 是否忘记了写DTD?</p>            <p>10. 是否忘记了写DTD?</p>            <p>10. 是否忘记了写DTD?</p>            <p>10. 是否忘记了写DTD?</p>定width属性。另外指定元素时尽量使用em而不是px做单位。</p>            <p>10. 是否忘记了写DTD?</p>            <p>10. 是否忘记了写DTD?</p>            <p>10. 是否忘记了写DTD?</p>            <p>10. 是否忘记了写DTD?</p>            <p>10. 是否忘记了写DTD?</p>定width属性。另外指定元素时尽量使用em而不是px做单位。</p> <p>10. 是否忘记了写DTD?</p>            <p>10. 是否忘记了写DTD?</p>            <p>10. 是否忘记了写DTD?</p>            <p>10. 是否忘记了写DTD?</p>            <p>10. 是否忘记了写DTD?</p>定width属性。另外指定元素时尽量使用em而不是px做单位。</p>            <p>10. 是否忘记了写DTD?</p>            <p>10. 是否忘记了写DTD?</p>            <p>10. 是否忘记了写DTD?</p>            <p>10. 是否忘记了写DTD?</p>            <p>10. 是否忘记了写DTD?</p>定width属性。另外指定元素时尽量使用em而不是px做单位。</p> <p>10. 是否忘记了写DTD?</p>            <p>10. 是否忘记了写DTD?</p>            <p>10. 是否忘记了写DTD?</p>            <p>10. 是否忘记了写DTD?</p>            <p>10. 是否忘记了写DTD?</p>定width属性。另外指定元素时尽量使用em而不是px做单位。</p>            <p>10. 是否忘记了写DTD?</p>            <p>10. 是否忘记了写DTD?</p>            <p>10. 是否忘记了写DTD?</p>            <p>10. 是否忘记了写DTD?</p>            <p>10. 是否忘记了写DTD?</p>定width属性。另外指定元素时尽量使用em而不是px做单位。</p>        </div>    </div>

Salin selepas log masuk

注：以上例子均是在清除了默认样式的情况下进行的

Salin selepas log masuk

    * {            margin: 0;            padding: 0;            color: #fff;        }

Salin selepas log masuk