双飞翼布局

1.需求:

            中间列主题内容优先加载;

            主题内容宽度自适应,左右两边内容宽度固定;

2.使用技术:

             浮动:三列外部元素都要浮动

             清除浮动:父元素清除浮动

             margin-left:margin-left为负值调整左右两列位置

            中间列主体内容添加块元素包裹内容,对包裹块元素左右添加padding值为左右列元素宽度

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 双飞翼布局和BFC
    双飞翼布局和BFC 之前看到了一些面试题中，面试官会问到如果实现双飞翼布局或者是圣杯布局，这两个布局的理念基本是类...
    LucasDog阅读 1,070评论 0赞 4
  • 圣杯布局和双飞翼布局的理解与思考
    圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度...
    阿尔卑斯的隆冬阅读 66,587评论 23赞 155
  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,801评论 1赞 92
  • Css 布局 -
    1. 前言 前端圈有个“梗”：在面试时，问个css的position属性能刷掉一半人，其中不乏工作四五年的同学。在...
    YjWorld阅读 4,538评论 5赞 15
  • 经典布局之圣杯布局&双飞翼布局
    前言 所谓经典，说白了就是古老的东西，但是又是很有用的东西。大多数前端，还有本菜，都或多或少了解的圣杯布局和双飞翼...
    kk少年阅读 1,214评论 0赞 8