三列布局

1.定位+padding【不建议】

2.float【middle不优先显示】

3.圣杯布局:

        a.中间优先显示,width=100%,结构在最上面

        b.三列全部float,父元素clearfix,width不能设置。

        c.设置左右margin为负值,把三个元素理解为在一行上就行

            左面的-100%,右面的-(元素宽度)

        d.设置父元素padding+左右元素的left(定位使元素层级上升)

4.伪等高布局:

        在圣杯的基础上使三列等高

        a.设置10000px的padding-bottom和-10000px的margin-bottom

        b.父元素设置overflow:hidden;

5.双飞翼布局【这名字都怎么回事:

        将圣杯布局父元素 padding+左右元素相对定位

        修改为 在中间元素中添加子元素,修改子元素padding【margin也行吧】

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,686评论 1 92
  • 前段时间用到了这些东西,学习顺便整理在了一起,清楚浮动几种方法没有试,有时间再深入学习一下。 **********...
    Creator93阅读 4,662评论 0 11
  • 水平居中: 1.设置元素为文本或者图片等行内元素时,可以通过“text-align:center;”来实现。 2....
    顾驰阅读 4,857评论 0 0
  • 如何在兼容所有浏览器的前提下,实现一个不定宽度的容器被分为左中右三列,左右两列定宽100px,中间列自适应剩余宽度...
    UolCano阅读 4,879评论 0 1
  • 圣杯布局 圣杯布局是典型的 CSS 布局问题,有着众多的解决方案。 圣杯布局是一种非常经典和常用的布局方式,其所指...
    调皮的小卷羊阅读 4,147评论 0 0