zoukankan      html  css  js  c++  java
  • CSS(五)圣杯,双飞翼布局

    双飞翼布局

      <style>
        *{
          margin: 0;
          padding: 0;
        }
        .main{
          width: 100%;
          height: 200px;
          background: pink;
          float: left;
        }
        .content{
          padding: 0 200px;
        }
        .left{
          height: 200px;
          width: 200px;
          background: blue;
          float: left;
          margin-left: -100%;
        }
        .right{
          width: 200px;
          height: 200px;
          background: yellow;
          float: left;
          margin-left: -200px;
        }
      </style>
      <div class="main">
        <div class="content">
          ...
        </div>
      </div>
      <div class="left"></div>
      <div class="right"></div>

         这里用到了  负边距    先写中间的部分  有一部分原因 也是因为  中间部分要优先显示    

    圣杯布局

        *{
          margin: 0;
          padding: 0;
        }
        .content{
          width: 100%;
          padding: 0 200px;
        }
        .main{
          width: 100%;
          height: 200px;
          background: red;
          float: left;
        }
        .left{
          width: 200px;
          height: 200px;
          background: pink;
          float: left;
          margin-left: -100%;
          position: relative;
          left: -200px;
        }
        .right{
          width: 200px;
          height: 200px;
          background: blue;
          float: left;
          margin-left: -200px;
          position: relative;
          right: 200px;
        }
      <div class="content">
          <div class="main"></div>
          <div class="left"></div>
          <div class="right"></div>
      </div>

    圣杯 与 双飞翼布局的  区别是  content 标签 在哪里     双飞翼在 main 里面     这样 content  需要  有 padding  如果 中间这部分  不止一个 content  就要写 多个  padding  这样   不划算   也很不方便  

    所以圣杯   是 双飞翼 的升级版      其实也差不多    就是  content 在最外层   原理和 双飞翼一样  都是  负边距       他是 给最外层的  content 设置  了  padding   里面 仍然是  双飞翼  不过  就是  让 ‘’翅膀‘’  通过 reletave 定位 来  补上  content padding 空出来的部分

  • 相关阅读:
    初学网络编程
    Python模块(三)(正则,re,模块与包)
    Python模块(二)(序列化)
    idea2020.2安装与破解
    部署-jenkins发布项目到linux环境
    部署-jenkins发布项目到windows环境
    部署-jenkins与gitlab结合使用
    部署-docker推送镜像到远程仓库
    部署-gitlab克隆地址踩坑
    部署-docker安装jenkins
  • 原文地址:https://www.cnblogs.com/96weibin/p/7989002.html
Copyright © 2011-2022 走看看