美文网首页Frontend-Fate
回顾经典的css布局结构--圣杯和淘宝双飞翼

回顾经典的css布局结构--圣杯和淘宝双飞翼

作者: 发明家简简 | 来源:发表于2017-06-05 16:11 被阅读0次

前端页面的三栏布局为常见的展现结构,中间栏(main)的宽度不确定,左右两栏的宽度固定。本文总结回顾经典的圣杯布局和淘宝双飞翼布局。

left main right
固定宽度 跟随窗口的宽度 固定宽度
圣杯布局:
<!-- 样式代码 -->
 <style>
    * {
      margin: 0;
      padding: 0;
    }


    .container {
      padding: 0 200px 0 220px;
    }

    .main, .left, .right {
      float: left;
      position: relative;
      min-height: 130px;
    }

    .main {
      background: yellow;
      width: 100%;
    }

    .left {
      background: red;
      width: 220px;
      margin-left: -100%;
      left: -220px;
    }

    .right {
      background: green;
      width: 200px;
      margin-left: -200px;
      right: -200px;
    }
  </style>

<!-- div结构 -->
<div class="container">
  <div class="main">main</div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>

双飞翼布局:
<!-- 样式代码 -->
 <style>
     * {
      margin: 0;
      padding: 0;
    }

    .left,
    .main,
    .right {
      position: relative;
      float: left;
      min-height: 130px;
    }

    .left {
      margin-left: -100%;
      width: 200px;
      background: red;
    }

    .right {
      margin-left: -220px;
      width: 220px;
      background: green;
    }

    .main {
      width: 100%;
      background: blue;

    }

    .inner {
      margin: 0 200px 0 220px;
    }

  </style>

<!-- div结构 -->
<div class="container">
  <div class="main">
    <div class="inner">
      inner
    </div>
  </div>
  <div class="left">
    <h4>left</h4>
  </div>
  <div class="right">
    <h4>right</h4>
  </div>
</div>

相关文章

网友评论

    本文标题:回顾经典的css布局结构--圣杯和淘宝双飞翼

    本文链接:https://www.haomeiwen.com/subject/oqazxxtx.html