6种CSS经典三栏布局的方法

2017-12-07 15:40:26文章来源:点点软件园热度:0

更多

  三栏布局,顾名思义就是两边固定,中间自适应。三栏布局在开发十分常见,今天小编就带来了6种CSS经典三栏布局的方法,一起来看看吧。



1.float布局


  最简单的三栏布局就是利用float进行布局。首先来绘制左、右栏:

2.jpg

  此时可以得到左右两栏分布:

3.png

  接下来再来看中间栏如何处理。我们知道对于float元素,其会脱离文档流,其他盒子也会无视这个元素。(但其他盒子内的文本依然会为这个元素让出位置,环绕在周围。)所以此时只需在container容器内添加一个正常的div,其会无视left和right,撑满整个container,只需再加上margin为left right流出空间即可:

4.jpg

  优势:简单


  劣势:中间部分最后加载,内容较多时影响体验


  2. BFC 规则


  BFC(块格式化上下文)规则规定:BFC不会和浮动元素重叠。所以如果将main元素设定为BFC元素即可:

5.jpg

  3. 圣杯布局


  圣杯布局的核心是左、中、右三栏都通过float进行浮动,然后通过负值margin进行调整。


  第一步,先来看下基本布局

6.jpg

  此时看到的效果是:左、右两栏被挤到第二行。这是因为main的宽度为100%。接下来我们通过调整左、右两栏的margin来将左、中、右放在一行中:

7.jpg

  第二步,将left的margin-left设置为-100%,此时左栏会移动到第一行的首部。然后再将right的margin-left设置为其宽度的负值:-100px,则右栏也会移动到和左、中栏一行中:

8.png

  不过此时还没有大功告成,我们试着在main中加入一些文字:

9.jpg

  可以看到文字被压住了,接下来就要解决这个问题。


  第三步,给container一个padding,该padding应该正好等于左、右栏的宽度:

10.jpg

  此时看到的结果是左、中、右三栏都整体收缩了,但文字依然被压住了。

11.jpg

  第四步,给左、右两栏加上相对布局,然后再通过设置left和right值向外移动:

12.jpg

  到此为止,大功告成:

13.jpg

    点点软件园小编推荐:


    css3 border-radius有什么属性


    TexturePacker怎么一键生成CSS sprites

上一篇绝地求生新地图沙漠Miramar区域介绍下一篇DNF驯鹿精灵在哪个位置
编辑:董小姐
标签CSS