七种方式实现三栏布局

仙女爱吃鱼

已于 2022-04-05 22:49:16 修改

阅读量9.5k

点赞数 22

分类专栏： css 文章标签：三栏布局 BFC 相对定位 flex

于 2022-04-05 22:48:02 首次发布

本文链接：https://blog.csdn.net/weixin_38318244/article/details/123970897

版权

css 专栏收录该内容

21 篇文章 3 订阅

订阅专栏

三栏布局：两边固定，中间自适应

在这里插入图片描述

一.流体布局（float布局）

1.首先绘制左右两栏，左栏左浮动，右栏右浮动
在这里插入图片描述

2.再绘制中间一栏，留出左右两栏距离与间距
在这里插入图片描述

<style>
   .container {
    border: 1px solid red;
  }
  
/*  流体布局,先绘制左右栏 */

  .left {
    float: left;
    width: 200px;
    height: 200px;
    background-color: aqua;
  }
  .right { 
    float: right;
    width: 200px;
    height: 200px;
    background-color: aquamarine;
  }
  .mid {
    background-color: cadetblue;
    height: 200px;
    margin-left: 220px;
    margin-right: 220px;
  } 
 

</style>
<body>
  <div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="mid">mid</div>
  </div>
</body>

缺点：主要内容无法最先加载，当主要内容过多时影响用户体验

二、BFC布局

我们先把左右两栏元素浮动，中间栏不做其他属性，发现中间栏默认撑满全屏，这时候我们就可以利用BFC不会和浮动元素重叠的规则，把中间元素改成一个BFC，使用overflow:hidden或者display: flex达到中间栏自适应
在这里插入图片描述

<style>
 .left {
    float: left;
    width: 200px;
    height: 200px;
    background-color: aqua;
    margin-right: 20px;
     
  }
  .right { 
    float: right;
    width: 200px;
    height: 200px;
    background-color: aquamarine;
    margin-left: 20px; 
    
  }
  .mid {
    background-color: cadetblue;
    height: 200px;
    overflow: hidden 
    /* display: flex */
  } 


</style>
<body>
  <div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="mid">mid</div>
  </div>
</body>

想了解BFC请看这里BFC

缺点：主要内容无法最先加载，当主要内容过多时影响用户体验

三、flex布局

flex属性的完整写法是:flex-grow项目放大比例、flex-shrink项目缩小比例、flex-basis项目占据属性

1.项目绘制按照左中右排列

2.父元素使用flex属性

3.(1)左右两栏固定宽度
赋值给元素width属性
赋值给元素flex属性：flex: 0 1 200px(放大比例0，缩小比例1，项目宽度200px）
(2)中间使用flex:1占据剩余空间

<style>
 .container {
    border: 1px solid red;
    display: flex;
  }
  .left {
    width: 200px;
    height: 200px;
    background-color: aqua;
  }
  .right { 
    width: 200px;
    height: 200px;
    background-color: aquamarine;
  }
  .mid {
    background-color: cadetblue;
    height: 200px;
    flex-grow: 1;
    margin-left: 20px; 
    margin-right: 20px;
  } 
</style>

<body>
  <div class="container">
    <div class="left">left</div>
    <div class="mid">mid</div>
    <div class="right">right</div>
  </div>
</body>

缺点：无法兼容所有浏览器

四、position定位

1.父元素使用相对定位
2.两侧子元素使用绝对定位
3.中间元素不做定位处理，只留出空间就好

 .container {
    position: relative;
  }

  .left {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 0;
    top: 0; 
    background-color: aqua;
  }

  .right {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background-color: aquamarine;
  }

  .mid {
    background-color: cadetblue;
    height: 200px;
	margin: 0 220px;
  }
</style>
<body>
  <div class="container">
    <div class="mid">mid</div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</div>
</body>

优点：主要内容可以优先加载

五、Table布局

1.先设置外边盒子采用表格布局
2.设置子元素为表格单元格格式
3.左右两栏设置宽度，中间无需设置

  .container {
    display: table;
    width: 100%;
  }
  .left, .mid, .right {
    display: table-cell;
  }

  .left {
    width: 200px;
    height: 200px;
    background-color: aqua;
  }
  .right { 
    width: 200px;
    height: 200px;
    background-color: aquamarine;
  }
  .mid {
    background-color: cadetblue;
    height: 200px;
  } 

</style>
<body>
  <div class="container">
    <div class="left">left</div>
    <div class="mid">mid</div>
    <div class="right">right</div>
  </div>
</div>
</body>

缺点：无法设置栏间距

六、圣杯布局

圣杯布局的核心是浮动、负边距、相对定位、不添加额外标签
左、中、右三栏都使用float进行浮动，然后通过负值margin进行调整

1.三栏都使用float进行浮动，左右定宽，中间宽度100%
2.因为中间100%所以布局变成这样

 .left {
    float: left;
    width: 200px;
    height: 200px;
    background-color: aqua;
  }
  .mid {
    float: left;
    width: 100%;
    height: 200px;
    background-color: cadetblue;
  }

  .right {
    float: left;
    height: 200px;
    width: 200px;
    background-color: aquamarine;
  }

</style>
<body>
  <div class="container">
    <div class="mid">midmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmid</div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</div>
</body>

在这里插入图片描述

3.所以我们使用负边距来调整，先让三栏位于一行，左栏设置margin-left为-100%，此时左栏位于第一行首部，然后将右栏的margin-left为其宽度的负值-200px，右栏也会移动到第一行中

.left {
    float: left;
    width: 200px;
    height: 200px;
    background-color: aqua;
    margin-left: -100%; // 移动左栏到第一行
  }
  .right {
    float: left;
    height: 200px;
    width: 200px;
    background-color: aquamarine;
    margin-left: -200px; // 移动右栏到第一行
  }

在这里插入图片描述

4.然后我们发现中间的元素宽度还是占满100%，所以文字被挡住了，然后我们操作父元素给出和左右两栏相等的内边距

 .container {
    margin-left: 200px;
    margin-right: 200px;
  }

然后我们发现文字不被遮挡了，但是盒子被整体压缩了
在这里插入图片描述

5.然后我们再使用相对定位把左右两栏"拽"出来：通过left 、right值移动

.left {
	position: relative;
    left: -200px;
}
 .right {
  	position: relative;
  	right: -200px;
 }

完整代码：

<style>
 .container {
    margin-left: 200px;
    margin-right: 200px;
  }
  .left {
    float: left;
    width: 200px;
    height: 200px;
    background-color: aqua;
    margin-left: -100%;
    position: relative;
    left: -200px;
  }
  .mid {
    float: left;
    width: 100%;
    height: 200px;
    background-color: cadetblue;
  }

  .right {
    float: left;
    height: 200px;
    width: 200px;
    background-color: aquamarine;
    margin-left: -200px;
    position: relative;
    right: -200px;
  }

</style>
<body>
  <div class="container">
    <div class="mid">midmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmid</div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</div>
</body>

在这里插入图片描述

七、双飞翼布局

双飞翼布局前两步和圣杯布局一样，只是处理中间栏部分内容被遮挡的问题解决方案不同：
在mian内部添加一个content，通过设置左右margin（左右两栏的宽度+间距margin）来避开遮挡

<style>
  .left {
    float: left;
    width: 200px;
    height: 200px;
    background-color: aqua;
    margin-left: -100%;
   
  }
  .mid {
    float: left;
    width: 100%;
  }
  .midContent {
    height: 200px;
    margin-left: 220px; // 左边距+间距
    margin-right: 220px;// 右边距+间距
    background-color: cadetblue;
  }

  .right {
    float: left;
    height: 200px;
    width: 200px;
    background-color: aquamarine;
    margin-left: -200px;
  } 


</style>
<body>
  <div class="container">
    <div class="mid">
        <div class="midContent">
          midmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmid
        </div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</div>
</body>

仙女爱吃鱼

关注

22
点赞
踩
142

收藏

觉得还不错? 一键收藏
0
评论
七种方式实现三栏布局

三样布局：两边固定，中间自适应一.流体布局（float布局）1.首先绘制左右两栏，左栏左浮动，右栏右浮动2.再绘制中间一栏，留出左右两栏距离与间距<style> .container { border: 1px solid red; } /* 流体布局,先绘制左右栏 */ .left { float: left; width: 200px; height: 200px; background-color: aqua;
复制链接

扫一扫