【CSS】三栏/两栏宽高自适应布局大全

头像
Ziwei
    阅读 9 分钟
    7

    页面布局

    注意方案多样性、各自原理、各自优缺点、如果不定高呢、兼容性如何

    三栏自适应布局,左右两侧300px,中间宽度自适应

    (1) 给出5种方案

    • 方案一: float (左右浮动,中间不用给宽,设置margin左右留出位置)

    html部分,center放到后面

            <section class="wrapper">
            <div class="left">left</div>
            <div class="right">right</div>
            <div class="content">content</div>
        </section>

    css部分

            .wrapper {
            height: 100px;
        }
        .left {
            float: left;
            width: 300px;
            height: 100%;
            background: red;
        }
        .right {
            float: right;
            width: 300px;
            height: 100%;
            background: yellow;
        }
        .content {
            background: skyblue;
            height: 100%;
            margin: 0 300px;
        }
    • 方案二: position定位 (中间设置left 300 right 300 ,宽度就自适应了)

    html不变

            <section class="wrapper">
            <div class="left">left</div>
            <div class="right">right</div>
            <div class="content">content</div>
        </section>

    css部分

            .wrapper {
            position: relative;
            height: 100px;
        }
        .left {
            position: absolute;
            left: 0;
            width: 300px;
            height: 100%;
            background: red;
        }
        .right {
            position: absolute;
            right: 0;
            width: 300px;
            height: 100%;
            background: yellow;
        }
        .content {
            position: absolute;
            left: 300px;
            right: 300px;
            background: skyblue;
            height: 100%;
        }
    • 方案三: flex伸缩布局

    html不变

            <section class="wrapper">
            <div class="left">left</div>
            <div class="right">right</div>
            <div class="content">content</div>
        </section>

    css部分

            .wrapper {
            display: flex;
            height: 100px;
        }
        .left {
            width: 300px;
            height: 100%;
            background: red;
        }
        .right {
            width: 300px;
            height: 100%;
            background: yellow;
        }
        .content {
            flex: 1;
            background: skyblue;
            height: 100%;
        }
    • 方案四: 表格布局 (设置父元素为display:table,子元素都是display:table-cell;然后给两边设置width,中间不设置就自动了,记得父元素给width:100%)

    html部分,将center改到中间位置

            <section class="wrapper">
            <div class="left">left</div>
            <div class="content">content</div>
            <div class="right">right</div>
        </section>

    css部分

           .wrapper {
            display: table;
            width: 100%;
            height: 100px;
        }
        .left {
            display: table-cell;
            width: 300px;
            height: 100%;
            background: red;
        }
        .right {
            display: table-cell;
            width: 300px;
            height: 100%;
            background: yellow;
        }
        .content {
            display: table-cell;
            background: skyblue;
            height: 100%;
        }
    • 方案五: 网格布局 Grid第一个专门为解决布局问题而创建的CSS模块 (设置容器类型,然后设置列宽和行高)

    html部分不变,center居中

            <section class="wrapper">
            <div class="left">left</div>
            <div class="content">content</div>
            <div class="right">right</div>
        </section>

    css部分十分简洁

            .wrapper {
            display: grid;
            width: 100%;
            grid-template-rows: 200px 100px 10px;
            grid-template-columns: 300px auto 300px;
        }
        .left {
            background: red;
        }
        .right {
            background: yellow;
        }
        .content {
            background: skyblue;
        }

    (2) 各自的优缺点。

    方案一、方案二:

    float和position方案的有点是兼容性好,因为都是比较老的解决方案了,
    缺点是float之后需要清除浮动造成的影响,
    定位的话就是绝对定位之后脱离文档流了,你要注意用position:relative包裹一下

    方案三:

    flex是目前移动端主流的方案,css的语法,缺点就是IE8以下不支持。

    方案四:

    语义化不太好,

    方案五:

    有严重的兼容性问题

    (3) 如果不定高,哪些方案会有问题

    如果不定高float / 定位的方案会有问题

    三栏自适应布局,上下固定,中间高度自适应 (自适应的地方设置top300 bottom300,高度就自适应了)

    方案一: 定位

    html

        <section class="wrapper">
        <div class="top">top</div>
        <div class="content">content</div>
        <div class="bottom">bottom</div>
    </section>

    css

            .wrapper {
            height: 800px;
            position: relative;
        }
        .top {
            position: absolute;
            top: 0;
            height: 100px;
            width: 100%;
            background: red;
        }
        .bottom {
            position: absolute;
            bottom: 0 ;
            height: 100px;
            width: 100%;
            background: blue;
        }
        .content {
            position: absolute;
            top: 100px;
            bottom: 100px;
            width: 100%;
            background: skyblue;
        }

    方案二: flex布局

    html

        <section class="wrapper">
        <div class="top">top</div>
        <div class="content">content</div>
        <div class="bottom">bottom</div>
    </section>

    css

            .wrapper {
            display: flex;
            height: 700px;
            flex-direction: column;
        }
        .top {
            height: 100px;
            background: red;
        }
        .bottom {
            height: 100px;
            background: blue;
        }
        .content {
            flex: 1;
            background: skyblue;
        }

    方案三: 网格布局grid (设置grid-template-rows: 300px auto 300px)

    html不变

        <section class="wrapper">
        <div class="top">top</div>
        <div class="content">content</div>
        <div class="bottom">bottom</div>
    </section>

    css

          .wrapper {
            display: grid;
            height: 700px;
            grid-template-rows: 100px auto 100px;
        }
        .top {
            background: red;
        }
        .bottom {
            background: blue;
        }
        .content {
            background: skyblue;
        }

    两栏自适应,右侧固定,左侧自适应

    方案一: 利用BFC的渲染规则,BFC不会和浮动的元素互相重叠
    html

        <section class="wrapper">
        <div class="right">right</div>
        <div class="left">left</div>
    </section>

    css 避免左侧侵入到右侧,给左侧div创建一个BFC,因为BFC的渲染机制就是独立的容器,不会和浮动的元素重叠

            .left {
            height: 200px;
            background: red;
            overflow: hidden;
        }
        .right {
            float: right;
            width: 300px;
            background: blue;
        }

    方案二: 定位

    html

        <section class="wrapper">
        <div class="left">left</div>
        <div class="right">right</div>
    </section>

    css

            .wrapper {
            position: relative;
        }
        .left {
            position: absolute;
            left: 0;
            right: 300px;
            background: red;
        }
        .right {
            position: absolute;
            width: 300px;
            right: 0;
            background: blue;
        }

    方案三: flex

    html

        <section class="wrapper">
        <div class="left">left</div>
        <div class="right">right</div>
    </section>

    css

          .wrapper {
            display: flex;
        }
        .left {
            flex: 1;
            background: red;
        }
        .right {
            width: 300px;
            background: blue;
        }

    方案四: 表格布局,注意给父元素表格要设置width:100%

    html

        <section class="wrapper">
        <div class="left">left</div>
        <div class="right">right</div>
    </section>

    css

            .wrapper {
            display: table;
            width: 100%;
        }
        .left {
            display: table-cell;
            background: red;
        }
        .right {
            display: table-cell;
            width: 300px;
            background: blue;
        }

    方案五: grid网格布局

    css

            .wrapper {
            display: grid;
            grid-template-columns: auto 300px;
        }
        .left {
            background: red;
        }
        .right {
            background: blue;
        }

    html

    <section class="wrapper">
        <div class="left">left</div>
        <div class="right">right</div>
    </section>

    两栏自适应,上侧固定,下侧自适应

    方案一: 定位

    设置content部分的top: 100px botton: 0

    html

            <section class="wrapper">
            <div class="top">top</div>
            <div class="content">content</div>
        </section>

    css

            .wrapper {
            position: relative;
            height: 100%;
            width: 100%;
        }
        .top {
            position: absolute;
            top: 0;
            height: 100px;
            background: red;
            width: 100%;

        }
        .content {
            position: absolute;
            width: 100%;
            top: 100px;
            bottom: 0;
            background: skyblue;
        }

    方案二: flex

    top高度100px,然后content设置flex: 1

    html

            <section class="wrapper">
            <div class="top">top</div>
            <div class="content">content</div>
        </section>

    css

                   display: flex;
               height: 800px;
           }
           .top {
               height: 100px;
               background: red;
   
           }
           .content {
               flex: 1;
               background: skyblue;
           }

    方案三: grid网格布局

    思路,就是设置display:grid后 设置列宽或者行高,有多少列就设置多少个参数,多少行就设多少参数。

    html

         <section class="wrapper">
            <div class="top">top</div>
            <div class="content">content</div>
        </section>

    css

         .wrapper {
            display: grid;
            height: 800px;
            grid-template-rows: 100px auto;
        }
        .top {
            background: red;
        }
        .content {
            background: skyblue;
        }
    csshtml
    Ziwei
    4.1k 声望420 粉丝

    前端程序员

    « 上一篇
    提高代码可读性,掌握这些就够了
    下一篇 »
    【CSS】水平垂直居中的4种实现（宽高不定）

    引用和评论

    推荐阅读
    头像
    不同浏览器下 autoplay 的限制策略和方案的整理

    Ziwei赞 24阅读 14.5k评论 1

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.6k评论 3

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.8k

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 12阅读 2.4k

    头像
    纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

    XboxYan赞 12阅读 1.6k

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 4.4k评论 3

    0 条评论
    得票最新