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 实现

圣杯布局

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

步骤：

第一步: 三个容器横向排列 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

相关标签：玩转CSS布局 css css3 javascript 网页设计前端

上一篇： vue+tinymce 实现上传图片和自定义插件

下一篇： Flutter开发的app在真机调试下无法加载网络资源

CSS布局之三列布局（圣杯与双飞翼）

三列布局

圣杯布局

双飞翼布局

css——之三行三列等高布局图文教程

使用CSS3实现多列布局与多背景的技巧

3种常见的css页面布局--双飞翼布局、粘连布局、左右两列布局

css自适应布局之“圣杯双飞翼”

CSS 圣杯布局 / 双飞翼布局的实现

圣杯布局与双飞翼布局

CSS布局之三列布局（圣杯与双飞翼）

三栏式布局(所谓的圣杯和双飞翼)_html/css_WEB-ITnose

3种常见的css页面布局--双飞翼布局、粘连布局、左右两列布局

CSS经典布局之圣杯布局、双飞翼布局_html/css_WEB-ITnose