CSS实行三栏布局（进阶即可实现圣杯和双飞翼布局）

最新推荐文章于 2024-07-19 18:46:52 发布

✪憑星月✪

最新推荐文章于 2024-07-19 18:46:52 发布

阅读量228

点赞数

分类专栏：笔记文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_61716556/article/details/121723324

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.浮动+定位（不符合三栏布局定义，但形似三栏布局）

2.浮动+调节外边距+相对定位

3.在和2部分原理相同的基础上稍作修改，可以实现双飞翼布局。

三栏布局可以用多种方法实现

1.浮动+定位（不符合三栏布局定义，但形似三栏布局）

效果如图

代码如下

<!DOCTYPE html>
<html lang="zn-ch">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>测试1</title>
  <style>
    .left{
      float:left;
      width:25%;
      height:700px;
      background-color: yellow;
    }
    .right{
      float:right;
      width:25%;
      height:700px;
      background-color: tomato;
    }
    .middle{
      width:50%;
      height:700px;
      position:absolute;
      left:25%;
      background-color: orange;
    }
    .sanlan{
      position: relative;
    }
  </style>
</head>
<body>
<div class="sanlan">
<div class="right"></div>
<div class="left"></div>
<div class="middle"></div>
</div>
</body>
</html>

实现思路：用浮动可以使左右栏到达指定位置。左栏设置左浮动，右栏设置右浮动。由于浮动盒子会避开常规流盒子，常规流盒子不会避开浮动盒子，所以书写盒子的html代码时将中间栏的盒子放到最后书写。因浮动关系，中间栏部分会被左栏遮挡，这时只需要设置绝对定位即可把中间栏拉回去。

三栏布局定义：两侧宽度固定，中间宽度自适应。

考虑到定义问题，这个实现方式并不正确。

2.浮动+调节外边距+相对定位

效果略有不同，确实实现了两边宽度固定，中间宽度自适应的要求。

代码如下

<!DOCTYPE html>
<html lang="zn-ch">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>测试1</title>
  <style>
    .left{
      width:200px;
     height:500px;
     background-color: aqua;
     float: left;
     margin-left: -100%;
     position: relative;
     left: -200px;
    }
    .right{
      width: 200px;
      height:500px;
      background-color: brown;
      float: left;
      margin-right: -200px;
    }
    .middle{
      width: 100%;
      height:500px;
      background-color: black;
      float: left;
     
    }
    .sanlan{
      margin: 0 200px;
     
      
    }
    .clearfix::after{
      content: "";
      display: block;
      clear:both;
    }
  </style>
</head>
<body>
<div class="sanlan clearfix">
<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>

</div>
</body>
</html>

实行思路：

1.设置4个盒子，一个盒子作为最大的盒子套住中间，左，右，三个盒子。CSS基础内容是宽高和背景颜色。背景颜色让效果可以明显的被观察到。宽度则是重点:左右栏要求固定宽度，中间栏则要设置为100%以达到占满的效果。暂时效果如下：

div独自占据一行，中间栏又宽度占满。左栏右栏只能依次在下面排列。

2.将三者全部设置左浮动。临时效果如下

由于中间盒子占据全部宽度，左右栏只能在下面浮动。

3.将最大盒子设置左右外边距，分别容纳左右两栏宽度（这样就给左右栏预留空间，后续会用到）。效果如下：

4.设置左栏左外边距为负值。这时外边距为负，左栏被拉到和中间栏同行。当左栏外边距设置为-100%时左栏到达未设置前的正上方。右栏右外边距设置为右栏宽度的负值。至此，左右两栏分别到达中间栏的左右两侧。临时效果如下：

5.左栏设置相对定位并设置left为负的自身宽度即可到达页面左侧，至此，三栏布局完成。

若要实现圣杯布局，在现有基础上加上header和footer即可。

3.在和2部分原理相同的基础上稍作修改，可以实现双飞翼布局。

不同点1.中间栏设置在一个盒子中。即多设置一个盒子应对中间栏内容遮挡问题。

不同点2.左右两栏不再使用相对定位确定位置，而是靠中间栏的外边距设置左右栏的位置

代码具体如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
    <style>
        .f,.h{
            width:100%;
            height:100px;
            background-color: chocolate;
        }
        .main{
            float: left;
            height: 300px;
            width:100%;
            background-color: chartreuse;
        }
        .left{
            width:120px;
            height: 300px;
            background-color: cyan;
            float: left;
            margin-left: -100%;
        }
        .right{
            width:200px;
            height: 300px;
            background-color: fuchsia;
            float: left;
            margin-left: -200px;
        }
        .center{
            background-color: gold;
            height:200px;
            width:auto;
            margin: 0 200px 0 120px;
        }
        .clearfix::after{
            content: "";
            display: block;
            clear:both;
        }
    </style>
</head>
<body>
    <header class="h"></header>
    <div class="san clearfix">
        <div class="main"><div class="center"></div></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <footer class="f"></footer>
</body>
</html>

具体效果如下：

✪憑星月✪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS实行三栏布局（进阶即可实现圣杯和双飞翼布局）

三栏布局可以用多种方法实现1.浮动+定位（不符合三栏布局定义，但形似三栏布局）效果如图代码如下<!DOCTYPE html><html lang="zn-ch"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=dev.
复制链接

扫一扫