前端学习笔记_css双飞翼布局&圣杯布局

在我看来,圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应。那么它们又有哪些区别呢?

双飞翼布局

顾名思义,双飞翼布局就仿佛是一只鸟,main就相当于鸟的身体,而aside和ad则是翅膀,先决定main放在哪里,再把aside和ad放在合适的位置。

  • 在html结构中,main要放在最前面,因为浏览器是从上至下加载页面的
  • main,aside,ad都要float:left;
  • main要width:100%;aside要margin-left: -100%;那么ad则margin-left: -150px;
  • 给main > inner使用:margin-left: 200px;margin-right: 150px;即可

html结构如下:

<div class="main">
    <div class="inner"> main </div>
</div>
<div class="aside"> aside </div>    
<div class="ad"> ad </div>

css设置如下:

.main{
        width: 100%;
        float: left;
    }

.main > .inner{
        margin-left: 200px;
        margin-right: 150px;
        background: deeppink;
    }

.aside{
        width: 200px;
        float: left;
        margin-left: -100%;
        background: pink;
    }

.ad{
        width: 150px;
        float: left;
        margin-left: -150px;
        background: pink;
    }

圣杯布局

  • 在html结构中,main要放在最前面
  • main,aside,ad都要float:left;position: relative;
  • main要width:100%;
  • aside要margin-left: -100%;再设置right: 200px;
  • 设置wrap的padding-left: 200px;padding-right: 150px;
  • ad直接:margin-right: -150px;即可。

html结构如下:

<div class="wrap">
    <div class="main"> main </div>
    <div class="aside"> aside </div>    
    <div class="ad"> ad </div>
</div>

css设置如下:

.wrap{
        padding-left: 200px;
        padding-right: 150px;
    }

    
.main{
        position: relative;
        width: 100%;
        float: left;
        background: deeppink;
    }


.aside{
        position: relative;
        width: 200px;
        float: left;
        margin-left: -100%;
        background: pink;
        right: 200px;
    }

.ad{
        position: relative;
        width: 150px;
        float: left;
        margin-right: -150px;
        background: pink;
    }

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 8,379评论 1 84
  • 1.负边距在让元素产生偏移时和position: relative有什么区别? 负边距导致元素的变动会使元素元素在...
    王康_Wang阅读 37评论 0 0
  • 按照是否相应浏览器宽度变化划分: 固定宽度布局:body的width是一个固定值,当浏览器的窗口缩小时,底部出现滚...
    lingfighting阅读 101评论 0 0
  • 首先谈谈三栏布局 三栏布局长什么样子?三栏布局是左右两侧浮动,而中间宽度自适应不浮动做出的效果。三栏布局 三栏布局...
    大春春阅读 1,048评论 5 25
  • 没有你的世界,一个人的时候,好寂寞。
    455b54561181阅读 22评论 0 1