css经典布局——双飞翼布局

      圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章 《In Search of the Holy Grail》,在国内最早是淘宝UED的工程师(玉伯大大)对圣杯布局改进并传播开来,在中国的叫法是双飞翼布局 。       

        圣杯布局双飞翼布局达到的效果基本相同,都是侧边两栏宽度固定,中间栏宽度自适应。 主要的不同之处就是在解决中间部分被挡住的问题时,采取的解决办法不一样,圣杯布局是在父元素上设置了padding-left和padding-right,在给左右两边的内容设置position为relative,通过左移和右移来使得左右两边的内容得以很好的展现,而双飞翼则是在center这个div中再加了一个div来放置内容,在给这个新的div设置margin-left和margin-right 。

效果图

        原本录制了一个小视频,奈何不能上传到博客中,视频中通过缩放页面可以发现随着页面的宽度的变化,这三栏布局是中间盒子优先渲染,两边的盒子框子宽度固定不变,即使页面宽度变小,也不影响我们的浏览。注意:为了安全起见,最好还是给body加一个最小宽度!

 双飞翼布局要求

  • header和footer各自占领屏幕所有宽度,高度固定。
  • 中间的container是一个三栏布局。
  • 三栏布局两侧宽度固定不变,中间部分自动填充整个区域。
  • 中间部分的高度是三栏中最高的区域的高度。

双飞翼布局的实现

  • left、center、right三种都设置左浮动
  • 设置center宽度为100%
  • 设置负边距,left设置负边距为100%,right设置负边距为自身宽度
  • 设置content的margin值为左右两个侧栏留出空间,margin值大小为left和right宽度
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>
<style>
  body {
    min-width: 550px;
    font-weight: bold;
    font-size: 20px;
  }
  #header,
  #footer {
    background: rgba(29, 27, 27, 0.726);
    text-align: center;
    height: 60px;
    line-height: 60px;
  }
  #container {
    overflow: hidden;
  }
  .column {
    text-align: center;
    height: 300px;
    line-height: 300px;
  }
  #left, #right, #center {
    float: left;
  }
  #center {
    width: 100%;
    background: rgb(206, 201, 201);
  }
  #left {
    width: 200px;
    margin-left: -100%;
    background: rgba(95, 179, 235, 0.972);
  }
  #right {
    width: 150px;
    margin-left: -150px;
    background: rgb(231, 105, 2);
  }
  .content {
    margin: 0 150px 0 200px;
  }
</style>

<body>
  <div id="header">#header</div>

  <div id="container">
    <div id="center" class="column">
      <div class="content">#center</div>
    </div>
    <div id="left" class="column">#left</div>
    <div id="right" class="column">#right</div>
  </div>

  <div id="footer">#footer</div>
</body>

</html>

  • 25
    点赞
  • 118
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 12
    评论
CSS圣杯布局双飞翼布局都是三栏布局,其中主要内容区域在最中间,左右两侧是侧边栏。它们的目的是为了解决传统三栏布局固定中间宽度,侧边栏无法等高的问题。 CSS圣杯布局的实现: HTML结构如下: ``` <div class="container"> <div class="main">主要内容</div> <div class="left">左侧边栏</div> <div class="right">右侧边栏</div> </div> ``` CSS样式如下: ``` .container { display: table; width: 100%; table-layout: fixed; border-spacing: 0; } .main { display: table-cell; width: 100%; background-color: #fff; } .left { display: table-cell; width: 200px; background-color: #ccc; position: relative; left: -200px; margin-left: -100%; } .right { display: table-cell; width: 200px; background-color: #ccc; position: relative; right: -200px; margin-right: -100%; } ``` 实现原理:通过将容器设置为table,主要内容区域和侧边栏都设置为table-cell,实现三栏等高。通过设置负的margin和left/right来实现侧边栏的位置偏移。 双飞翼布局的实现: HTML结构如下: ``` <div class="container"> <div class="main">主要内容</div> </div> <div class="left">左侧边栏</div> <div class="right">右侧边栏</div> ``` CSS样式如下: ``` .container { padding-left: 200px; padding-right: 200px; } .main { float: left; width: 100%; background-color: #fff; } .left { float: left; width: 200px; margin-left: -100%; background-color: #ccc; } .right { float: left; width: 200px; margin-left: -200px; background-color: #ccc; } ``` 实现原理:通过设置主要内容区域的宽度为100%,再通过padding将左右两侧的宽度撑开。通过设置负的margin和left来实现侧边栏的位置偏移。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@Demi

您的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值