css之圣杯布局和双飞翼布局

圣杯布局和双飞翼布局的目的

  • 三栏布局,中间一栏最先加载和渲染(内容最重要)
  • 两侧内容固定,中间内容随着宽度自适应
  • 一般用于pc网页

技术总结

  • 使用float布局
  • 两侧使用margin负值以便和中间内容横向重叠
  • 防止中间内容被两侧覆盖,一个用padding, 一个用margin

技术要点

  • margin-top和margin-left负值,元素向上、向左移动
  • margin-right负值,右侧元素左移,自身不影响
  • margin-bottom 负值,下方元素上移,自身不影响

圣杯布局

使用padding和margin负值以及position实现

xml 复制代码
  <style>
    body {
      min-width: 550px;
    }
    #header {
      background-color: blanchedalmond;
    }
    #main {
      padding-left: 200px;
      padding-right: 200px;
    }
    #center {
      width: 100%;
    }
    #left {
      background: red;
      width: 200px;
      margin-left: -100%; // 向左移动,父元素的宽度,到达center的最左侧
      position: relative;
      right: 200px; // 根据自身向左移动
    }
    #right {
      background: gold;
      width: 200px;
      margin-right: -200px;
    }
    #footer {
      background-color: aquamarine;
    }
    .clearfix::after {
      content: '';
      display: block;
      clear: both;
    }
    #main .column {
      float: left;
    }
  </style>
  
  <body>
  <div id="header">头部</div>
  <div id="main" class="clearfix">
    <div id="center" class="column">中</div>
    <div id="left" class="column">左</div>
    <div id="right" class="column">右</div>
  </div>
  <div id="footer">底部</div>
</body>

双飞翼布局

使用margin和margin负值实现

xml 复制代码
 <style>
    body {
      min-width: 550px;
    }
    #main {
      width: 100%;
      height: 200px;
      background: red;
    }
    
    .column {
      float: left;
    }
    #left {
      width: 200px;
      height: 200px;
      background-color: aquamarine;
      margin-left: -100%;
    }
    #right{
      width: 200px;
      height: 200px;
      background-color: blue;
      margin-left: -200px;
    }
    #main-warp {
      margin: 0 200px 0 200px;
    }
  </style>
  <body>
  <div id="main" class="column">
    <div id="main-warp">中</div>
  </div>
  <div id="left" class="column">左</div>
  <div id="right" class="column">右</div>
</body>
相关推荐
寒雒37 分钟前
【Python】实战:实现GUI登录界面
开发语言·前端·python
独上归州44 分钟前
Vue与React的Suspense组件对比
前端·vue.js·react.js·suspense
战族狼魂1 小时前
html+js实现图片的放大缩小等比缩放翻转,自动播放切换,顺逆时针旋转
javascript·css·html
Komorebi⁼1 小时前
Vue核心特性解析(内含实践项目:设置购物车)
前端·javascript·vue.js·html·html5
明月清风徐徐1 小时前
Vue实训---0-完成Vue开发环境的搭建
前端·javascript·vue.js
SameX1 小时前
HarmonyOS Next 企业数据备份与恢复策略
前端·harmonyos
SameX1 小时前
HarmonyOS Next 企业数据传输安全策略
前端·harmonyos
daopuyun1 小时前
LoadRunner小贴士|开发Web-HTTP/HTML协议HTML5相关视频应用测试脚本的方法
前端·http·html
李先静1 小时前
AWTK-WEB 快速入门(1) - C 语言应用程序
c语言·开发语言·前端
MR·Feng1 小时前
使用Electron将vue2项目打包为桌面exe安装包
前端·javascript·electron