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

isaced 发布于2019-08-29 14:21 / 2962人阅读

摘要：方案一方案二和方案的有点是兼容性好因为都是比较老的解决方案了缺点是之后需要清除浮动造成的影响定位的话就是绝对定位之后脱离文档流了你要注意用包裹一下方案三是目前移动端主流的方案的语法缺点就是以下不支持。

页面布局

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

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

(1) 给出5种方案

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

html部分,center放到后面

        
            left
            right
            content

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不变

        
            left
            right
            content

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不变

        
            left
            right
            content

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改到中间位置

        
            left
            content
            right

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居中

        
            left
            content
            right

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

    
        top
        content
        bottom

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

    
        top
        content
        bottom

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不变

    
        top
        content
        bottom

css

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

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

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

    
        right
        left

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

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

方案二: 定位

html

    
        left
        right

css

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

方案三: flex

html

    
        left
        right

css

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

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

html

    
        left
        right

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


        left
        right

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

方案一: 定位

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

html

        
            top
            content

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

        
            top
            content

css

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

方案三: grid网格布局

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

html

     
            top
            content

css

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

云服务器 GPU云服务器两栏宽高 html5宽高自适应三栏布局 html5 三栏布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113067.html

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

摘要：方案一方案二和方案的有点是兼容性好因为都是比较老的解决方案了缺点是之后需要清除浮动造成的影响定位的话就是绝对定位之后脱离文档流了你要注意用包裹一下方案三是目前移动端主流的方案的语法缺点就是以下不支持。页面布局注意方案多样性、各自原理、各自优缺点、如果不定高呢、兼容性如何三栏自适应布局,左右两侧300px,中间宽度自适应 (1) 给出5种方案方案一: float (左右浮动,中间...

jindong 2019-08-01 18:28 评论0 收藏0
CSS三栏布局的经典实现方法

摘要：经典方法三栏布局的方法有很多种，其中最经典的方法莫过于圣杯布局和双飞翼布局。而双飞翼布局方法无需相对位置属性，而是采用为中栏内容创建的方式，通过来实现布局。文章第二部分阐述了流行的圣杯布局方法和双飞翼布局方法的细节和异同。三栏是CSS布局中常见的一种布局模式，顾名思义，就是将网页内容以三列的形式呈现。通常，三栏布局中的左栏和右栏是固定宽度的，中栏随着窗口宽度的变化而变化。本文探讨栏三...

neuSnail 2019-08-30 15:56 评论0 收藏0
CSS三栏布局的经典实现方法

摘要：经典方法三栏布局的方法有很多种，其中最经典的方法莫过于圣杯布局和双飞翼布局。而双飞翼布局方法无需相对位置属性，而是采用为中栏内容创建的方式，通过来实现布局。文章第二部分阐述了流行的圣杯布局方法和双飞翼布局方法的细节和异同。三栏是CSS布局中常见的一种布局模式，顾名思义，就是将网页内容以三列的形式呈现。通常，三栏布局中的左栏和右栏是固定宽度的，中栏随着窗口宽度的变化而变化。本文探讨栏三...

Forelax 2019-08-02 14:31 评论0 收藏0
两种方式实现CSS双飞翼布局

摘要：双飞翼布局，就是两端固定宽高，中间自适应的三栏布局先来张图，左边和右边的灰色块是固定宽高的，中间绿色的区域是宽高自适应方式一通过弹性布局来实现看代码结构，是中间的自适应区域先简单粗暴的解决一下浏览器的默认样式使用，盒模型好计算，妈妈再双飞翼布局，就是两端固定宽高，中间自适应的三栏布局先来张图，左边和右边的灰色块是固定宽高的，中间绿色的区域是宽高自适应 showImg(https:/...

ghnor 2019-08-01 17:17 评论0 收藏0
CSS入门指南-4：页面布局

摘要：属性是中最重要的用于控制布局的属性。布局的高度多数情况下，布局中结构化元素乃至任何元素的高度是不必设定的。更新效果如图以上措施使布局有了明显改观。这是《CSS设计指南》的读书笔记，用于加深学习效果。 display 属性 display是 CSS 中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值。对于大多数元素它们的默认值通常是 block 或 inline ...

ethernet 2019-08-02 15:57 评论0 收藏0