CSS-三栏布局的常用6种方法

三栏布局一般指左右两栏固定宽度,中间一栏自适应的布局方法,也是许多网站常用的布局方式。如下图:

该示例在一个html文件中编写,为方便起见,预先写好一个通用的css,左右宽度都为100px;


1.浮动三栏


左右两栏均为float,中间一栏宽度自适应,这里为了中间一栏的安全输入空间,要为中间一栏加上左右margin。因为block元素自带换行效果,所以main要放在左右元素的后面,而dom元素是按顺序加载的,因此main不能在左右两栏之间完成加载。

2.利用BFC

利用BFC不与float元素叠加的特点,让中间一栏通过设置overflow属性拥有BFC特性,实现了这个三栏布局。


该布局同样不能让main在左右两栏之前加载。

后面介绍的四种三栏布局可以让main在左右两栏之前加载。

3.absolute实现三栏布局

使用absolute定位,只需将左右两栏绝对定位到窗口两边,为main添加左右margin创建安全输入区域即可。因为absolute是以第一个定位不是static的父元素定位的,为这个整体添加一个定位不是static的父元素,绝对定位不会与header,footer等重叠。并且main的dom位置在left和right的前面,可在左右两栏之前完成加载


4.flex

flex为一种弹性布局方式,flex-direction默认为row,即按行排列;order可以指定在元素在一个flex盒子之中的排列顺序;将main放在left和right前面,并为其设置order至left和right的中间,可以让main优先加载,并且位置不变;flex-grow属性为元素相对放大比率,默认为0,即不放大,设置为1时会自动扩展。


5.圣杯布局

首先,建立main,left,right之间的dom结构,将main的width设为100%,main,left和right均为向左浮动,此时的界面如图:

然后利用负margin对元素碰撞的改变,让下面的两个元素上去。对left,要到最左边,margin-left设为-100%,right要到右边,margin-left设为负的自身宽度,现在界面如图


到这里的步骤都与下面的双飞翼布局一致。

虽然left和right都到了main两边,但main还没有安全输入区间,比如圣杯两字被left盖住了。

为这个整体的父元素box加padding,并用relative将left,right移至对应的位置。

即完成了圣杯布局,可完成main在left,right之前加载。


6.双飞翼布局

双飞翼的步骤基本同圣杯布局,不过在main里面嵌套了一个块级元素,为那个块级元素设置margin,在这个块级元素之中输入的内容不会被覆盖,并在left,right之前载入


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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,814评论 1 92
  • 前言 现在,我们被称为前端工程师。然而,早年给我们的称呼却是页面仔。或许是职责越来越大,整体的前端井喷式的发展,使...
    Calvin李阅读 512评论 0 0
  • 一、负边距在让元素产生偏移时和position: relative有什么区别? 负margin和position:...
    婷楼沐熙阅读 894评论 0 4
  • 前言 温馨提示:本文较长,图片较多,本来是想写一篇 CSS 布局方式的,但是奈何 CSS 布局方式种类太多并且实现...
    sunshine小小倩阅读 3,181评论 0 59
  • 好怀念那遥远的家!温暖而不孤独。亲情而不渴望。装的都是满满的爱!把她珍爱在心里面。
    潇潇雨雪阅读 190评论 0 0