资讯专栏INFORMATION COLUMN

四种方法实现──三栏布局(圣杯布局、双飞翼布局)

wqj97 / 2500人阅读

摘要:圣杯布局双飞翼布局本质上都是三栏布局中间自适应两边固定宽。二说明网上有人提到这个方法在某些情况下会出现,具体没有深入了解过。这个方法兼容性有比较大的问题,网上有不少文章提到浏览器还没有提供支持,实际上新版主流浏览器已经支持了。

圣杯布局、双飞翼布局,本质上都是三栏布局──中间自适应两边固定宽。有一次面试,要求写出三种实现方式,结果只写出了两种,面试官说基础还不够扎实~呜

圣杯布局

圣杯HTML结构:

中间的
左边的
右边的
双飞翼布局

双飞翼HTML结构为:

中间的
左边的
右边的
一、float+margin

    

说明:网上还有人用padding替换margin的方法,感兴趣的自己去查。

二、Position

    

说明:网上有人提到这个方法在某些情况下会出现bug,具体没有深入了解过。

三、Flex

    

说明:低版本的浏览器有兼容的问题,在网上也看到有人用order控制位置

四、Grid

    

说明:grid-column一共分为5个格,“grid-column:1/2”占了第一个和第二个格,不是指占了二分之一。这个方法兼容性有比较大的问题,网上有不少文章提到浏览器还没有提供支持,实际上新版主流浏览器已经支持了。

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

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

相关文章

  • 四种方法实现──三栏布局圣杯布局飞翼布局

    摘要:圣杯布局双飞翼布局本质上都是三栏布局中间自适应两边固定宽。二说明网上有人提到这个方法在某些情况下会出现,具体没有深入了解过。这个方法兼容性有比较大的问题,网上有不少文章提到浏览器还没有提供支持,实际上新版主流浏览器已经支持了。 圣杯布局、双飞翼布局,本质上都是三栏布局──中间自适应两边固定宽。有一次面试,要求写出三种实现方式,结果只写出了两种,面试官说基础还不够扎实~呜 圣杯布局 圣杯...

    callmewhy 评论0 收藏0
  • CSS三栏布局四种方法

    摘要:浮动代码如下注意元素次序代码如下左栏左浮动中间自适应右栏右浮动这种方式代码足够简洁与高效,也容易理解后记四种方法其实只有圣杯布局和双飞翼布局较难理解,但实际上理解了圣杯布局,双飞翼布局自然就理解了。 前言 总括: 不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的,也许你不知道什么事三栏布局什么是两栏布局但实际已经在用,或许你知道三栏布局的一种或两种方法,但实际操作中也只会依赖那...

    RobinQu 评论0 收藏0
  • 几种常见的CSS布局

    摘要:本文概要本文将介绍如下几种常见的布局其中实现三栏布局有多种方式,本文着重介绍圣杯布局和双飞翼布局。借助等高布局正负可解决,下文会介绍双飞翼布局特点同样也是三栏布局,在圣杯布局基础上进一步优化,解决了圣杯布局错乱问题,实现了内容与布局的分离。 本文概要 本文将介绍如下几种常见的布局: showImg(https://segmentfault.com/img/remote/14600000...

    FuisonDesign 评论0 收藏0
  • 几种常见的CSS布局

    摘要:本文概要本文将介绍如下几种常见的布局其中实现三栏布局有多种方式,本文着重介绍圣杯布局和双飞翼布局。借助等高布局正负可解决,下文会介绍双飞翼布局特点同样也是三栏布局,在圣杯布局基础上进一步优化,解决了圣杯布局错乱问题,实现了内容与布局的分离。 本文概要 本文将介绍如下几种常见的布局: showImg(https://segmentfault.com/img/remote/14600000...

    andot 评论0 收藏0
  • 几种常见的CSS布局

    摘要:本文概要本文将介绍如下几种常见的布局其中实现三栏布局有多种方式,本文着重介绍圣杯布局和双飞翼布局。借助等高布局正负可解决,下文会介绍双飞翼布局特点同样也是三栏布局,在圣杯布局基础上进一步优化,解决了圣杯布局错乱问题,实现了内容与布局的分离。 本文概要 本文将介绍如下几种常见的布局: showImg(https://segmentfault.com/img/remote/14600000...

    荆兆峰 评论0 收藏0

发表评论

0条评论

wqj97

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<