资讯专栏INFORMATION COLUMN

三栏布局的三个典型方法(圣杯、双飞翼、flex)

OldPanda / 2834人阅读

摘要:聊聊三栏布局左右定宽,中间自适应。效果图圣杯布局圣杯双飞翼布局双飞翼注意一定要在要在中再包裹一个并设置它的。布局最重要的还是要理解浮动和负技术以及。

聊聊三栏布局----左右定宽,中间自适应。

效果图:

圣杯布局



圣杯



middle
left
right
双飞翼布局



    
    双飞翼
    


  
middle
left
right

注意:一定要在要在main中再包裹一个

并设置它的margin:0 180px 0 200px。

Flex布局



    
    Flex
    


left
middle
right

最重要的还是要理解浮动和负margin技术以及width:100%。

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

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

相关文章

  • 三栏布局三个典型方法圣杯飞翼flex

    摘要:聊聊三栏布局左右定宽,中间自适应。效果图圣杯布局圣杯双飞翼布局双飞翼注意一定要在要在中再包裹一个并设置它的。布局最重要的还是要理解浮动和负技术以及。 聊聊三栏布局----左右定宽,中间自适应。 效果图: showImg(https://segmentfault.com/img/bVbe3Ek?w=1083&h=587); 圣杯布局 圣杯 .container{ padd...

    Eric 评论0 收藏0
  • 圣杯布局飞翼布局

    摘要:参考文章同学的关于圣杯布局,圣杯布局和双飞翼布局的区别经典布局圣杯布局实现的效果主要在中,和固定宽度,首先渲染,且自适应宽度。 ps: 参考文章 DotHide同学的关于圣杯布局,圣杯布局和双飞翼布局的区别 经典布局 圣杯布局 showImg(https://segmentfault.com/img/remote/1460000015851268?w=682&h=247); #hea...

    ZweiZhao 评论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条评论

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