浅谈css双飞翼布局和圣杯布局

时间:2017-09-22

去掉包裹层padding,以中间栏新增div的margin代替

        body{
          padding:0;
          margin:0
        }
        .header,.footer{
          width:100%;  
          background:#666;
          height:30px;clear:both;
        }
        .bd{
            /*padding-left:150px;*/
            /*padding-right:190px;*/
        }
        .left{
            background: #E79F6D;
            width:150px;
            float:left;
            margin-left:-100%;
            /*position: relative;*/
            /*left:-150px;*/
        }
        .main{
            background: #D6D6D6;
            width:100%;
            float:left;
        }
        .right{
            background: #77BBDD;
            width:190px;
            float:left;
            margin-left:-190px;
            /*position:relative;*/
            /*right:-190px;*/
        }
        .inner{
            margin-left:150px;
            margin-right:190px;
        }

3、双飞翼布局和圣杯布局的区别

圣杯布局和双飞翼布局解决问题的方案在前一半是相同的,即:

  • 中间栏宽度设置为100%
  • 三栏全部float浮动
  • 左右两栏加上负margin让其跟中间栏div并排,以形成三栏布局。

不同在于解决中间栏div内容不被遮挡问题的思路不一样。

圣杯布局

  • 将三栏的外包裹层设置左右padding-left和padding-right
  • 将左右两个div用相对布局position: relative并分别配合right和left属性,相对自身移动以便不遮挡中间div

双飞翼布局

  • 中间div内部创建子div用于放置内容
  • 在该子div里用margin-left和margin-right为左右两栏div留出位置

多了1个div,少用4个css属性(圣杯布局中间divp的adding-left和padding-right这2个属性,加上左右两个div用相对布局position: relative及对应的right和left共4个属性,一共6个;而双飞翼布局子div里用margin-left和margin-right共2个属性,6-2=4)。

并且双飞翼布局还有个好处,让Main变成BFC元素了,屏幕宽度缩小Main也不会被挤下去,圣杯布局就会被挤下去。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

  • 共2页:
  • 上一页
  • 2/2下一篇
    上一篇:html转换为pdf案例的一些总结(多图推荐) 下一篇:CSS3与动画有关的属性transition、animation、transform对比(史上最全版)

    相关文章

    最新文章