欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

CSS布局之三列布局(圣杯与双飞翼)

程序员文章站 2022-03-13 19:51:32
三列布局三列布局一 两列定宽,一列自适应(右边)方案一:float + margin 属性实现;左中设置 float: left;右设置 margin-left 取值为左盒子的总宽#left { width: 200px; /* 定宽 */ height: 300px; background-color: #c9394a; float: left;}#center { width: 200px; /* 定宽 */ height: 300px; background-...

三列布局

三列布局一 两列定宽,一列自适应(右边)

方案一:float + margin 属性实现;
左中设置 float: left;右设置 margin-left 取值为左盒子的总宽

#left {
  width: 200px; /* 定宽 */
  height: 300px;
  background-color: #c9394a;
  float: left;
}

#center {
  width: 200px; /* 定宽 */
  height: 300px;
  background-color: green;
  float: left;
}

#right {
  height: 400px;
  background-color: #cccccc;
  margin-left: 400px;
}

方案二:float + overflow 属性实现;
左中设置 float: left;右设置 overflow: hidden;

方案三: display 属性的 table 相关值实现
给父元素设置 display: table;
给子元素设置 display: table-cell;

#parent {
  width: 100%;
  height: 100%;
  display: table;
}

#left {
  width: 200px; /* 定宽 */
  height: 300px;
  background-color: #c9394a;
  display: table-cell;
}

#center {
  width: 200px; /* 定宽 */
  height: 300px;
  background-color: green;
  display: table-cell;
}

#right {
  height: 400px;
  background-color: #cccccc;
  display: table-cell;
}

方案四:使用 flex 实现
给父元素设置 display: flex;
给自适应子元素设置 flex:1;

方案五:使用 Grid 实现
给父元素设置 display: grid;
grid-template-columns:200px 200px auto;

三列布局一 两侧定宽,中间自适应

  • 圣杯布局方法
  • 双飞翼布局方法
  • 使用 Gird 实现
  • 使用 table 实现
  • 使用 flex 实现
  • 使用 position 实现

圣杯布局

圣杯布局是来源于该布局效果类似圣杯而得名。简单来说,就是指三行三列布局;
圣杯布局核心:主要是实现中间主体部分中的左右定宽+中间自适应的布局效果;
与其他不同的是,圣杯把中间的自适应部分放在最前面,让他最先加载
CSS布局之三列布局(圣杯与双飞翼)

步骤:

  • 第一步: 三个容器横向排列 float:left
    已经在一行显示啦 => center 100%,left 和 right 因为没有剩余的空间 所以掉下去啦

  • 第二步: 为了给 left 和 right 容器留出一些空间 ,把 center 往中间进行挤压 给父元素添加 padding-left:310px;padding-right:310px;取值为左盒子和右盒子的宽度

  • 第三步: 把 left 移到它原本位置 => left 应该在 center 的前面
    margin-left:-100%;这表示把 left 移动到和 center 重叠
    把 left 移动在理想的位置 => 定位 relative 作用是为了让 left 生效,设置 left:-310px;

  • 第四步: 把 right 移到它原本位置 => right 应该在 center 的后面
    margin-left:-300px;
    position: relative;
    right:-310px;
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>圣杯布局</title>
    <style>
      /* padding 内填充 - 留白   margin外间距 - 位置移动  负值 => 反向移动*/
      * {
        margin: 0;
        padding: 0;
      }

      #parent {
        height: 300px;
        /* 第二步: 给left和right容器留出一些空间  把center往中间进行挤压 */
        padding-left: 310px;
        padding-right: 310px;
      }

      #left,
      #center,
      #right {
        height: 300px;
        /* 第一步: 三个容器横向排列 float =>已经在一行显示啦 => center 100%
      left和right因为没有剩余的空间 所以掉下去啦
      */
        float: left;
      }

      #left,
      #right {
        width: 300px;
      }

      #left {
        background-color: #c9394a;
        /* 第三步: 把left移到它原本位置 => left应该在center的前面 */
        margin-left: -100%;
        /* 把left移动在理想的位置 => 定位  relative 作用是为了让left生效*/
        position: relative;
        left: -310px;
      }

      #center {
        width: 100%;
        background-color: green;
      }

      #right {
        background-color: #cccccc;
        /* 第四步: 把right移到它原本位置 => right应该在center的后面 */
        margin-left: -300px;
        position: relative;
        right: -310px;
      }
    </style>
  </head>

  <body>
    <!-- 三列布局 - 左右定宽   中间自适应   =>  圣杯布局   center在left和right的结构的前面 -->
    <div id="parent">
      <div id="center"></div>
      <div id="left"></div>
      <div id="right"></div>
    </div>
  </body>
</html>

双飞翼布局

双飞翼布局最早是淘宝团队提出,是针对圣杯布局的优化解决方案。
在中间自适应盒子中又套了一个子容器,主要是优化了圣杯布局中开启定位的问题。

步骤:

  • 第一步: 三个容器横向排列 float:left
    已经在一行显示啦 => center 100%,left 和 right 因为没有剩余的空间 所以掉下去啦

  • 第二步: 为了给 left 和 right 容器留出一些空间 ,把 center 往中间进行挤压 给 cengter 的子元素添加 外间距 margin-left: 310px; margin-right: 310px;取值为左盒子和右盒子的宽度

  • 第三步: 左盒子位置的移动 => 移动到她原本的位置
    margin-left: -100%;

  • 第四步:右盒子位置的移动 => 移动到她原本的位置
    margin-left: -300px;
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>双飞翼布局</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      #parent {
        height: 300px;
      }

      #left,
      #center,
      #right {
        height: 300px;
        /* 第一步: 让三个列横向排列 => float 三个列其实是在一行显示  
      我们看到的不在一行 => center 100%  放不下  挤下去了
       */
        float: left;
      }

      #left,
      #right {
        width: 300px;
      }

      #left {
        background-color: #c9394a;
        /* 第三步: 位置的移动 => 移动到她原本的位置*/
        margin-left: -100%;
      }

      #center {
        width: 100%;
        /* background-color: green; */
      }

      #right {
        background-color: #cccccc;
        /* 位置的移动  => 移动到她原本的位置  */
        margin-left: -300px;
      }

      #inner {
        height: 300px;
        background-color: hotpink;
        /* 第二步: 把center进行挤压  */
        /* 给left的容器 留出的空间 */
        margin-left: 310px;
        /* 给right的容器 留出的空间 */
        margin-right: 310px;
      }
    </style>
  </head>

  <body>
    <!-- 在圣杯基础的结构的基础上  =  中间容器里面嵌套了一个子容器=  解决了圣杯用定位进行再次移动的问题
  双飞翼布局  没有定位进行位置的移动   =>  简化了圣杯的代码(定位)
  -->
    <div id="parent">
      <div id="center">
        <div id="inner"></div>
      </div>
      <div id="left"></div>
      <div id="right"></div>
    </div>
  </body>
</html>

本文地址:https://blog.csdn.net/weixin_47471015/article/details/112527107