CSS三栏布局-圣杯布局

最新推荐文章于 2023-04-15 17:32:30 发布

zh_1130

最新推荐文章于 2023-04-15 17:32:30 发布

阅读量309

点赞数 2

文章标签： css三栏布局自适应三栏布局圣杯布局

本文链接：https://blog.csdn.net/zh_1130/article/details/96365903

版权

这里写自定义目录标题

圣杯布局
- 具体步骤
- - - 完整代码

圣杯布局

**圣杯布局的作用：**两侧宽度固定，中间宽度自适应的三栏布局。
技术点：负外边距+浮动并排+相对定位。
圣杯布局思路：将三个div元素并排放置，中间div宽度设置100%；两边div元素分别设置具体宽度（如：200px,220px）。将三个div设置float：left属性，使三个元素可并排放置。再将三个div的父div添加左右内边距使其刚好空出左右两侧div的宽度位置，再通过相关定位将两侧div放置空白部分。

具体步骤

1.建立body结构，如下：

<body>
    <div class="container">
        <div class="center">中间盒子</div>
        <div class="left">左边盒子</div>
        <div class="right">右边盒子</div>
    </div>
</body>
<!-- 注意顺序，分别为中间，两侧-->

2.添加三个div盒子属性。设置float使其并排放置；

.center{
        width: 100%; <!-- 宽度设置100%，可自适应-->
        height: 400px;
        background-color: antiquewhite；
        float:left;
    }
    .left{
        width: 200px;
        height: 400px;
        background-color: blueviolet;
       float:left;
    }
    .right{
        width: 220px;
        height: 400px;
        background-color:chocolate;
        float: left;
      
    }

钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱
注：设置完成后，页面显示如图，由于中间盒子宽度为100%，所以左边，右边盒子被挤到下一列。

3.根据外边距，将两侧盒子放置在中间盒子的两侧。

 .left{
        width: 200px;
        height: 400px;
        background-color: blueviolet;
        float: left;
        margin-left: -100%;
        }
    .right{
            width: 220px;
            height: 400px;
            background-color:chocolate;
            float: left;
            margin-left:-220px;
    }

在这里插入图片描述
如图所示，两个盒子放置在中间盒子的两侧，但是中间盒子的内容被左侧盒子盖住了。

4…将大盒子宽度设置为100%，给大盒子设置内间距左内间距为左边盒子宽度，右间距为右侧盒子宽度，此时中间盒子两侧空出位置。
在这里插入图片描述
如图，现在两侧空出的位置刚好为两侧盒子的宽度。

5.根据相对定位，给左侧盒子和右侧盒子设置左移动和右移动。

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

在这里插入图片描述
如此完成了圣杯布局，中间自适应，两侧不变。

完整代码

<!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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
    .container{
        height: 400px;
        padding-left: 200px;
        padding-right: 220px;
    }
    .center{
        width: 100%;
        height: 400px;
        background-color: antiquewhite;
        float:left;
    }
    .left{
        width: 200px;
        height: 400px;
        background-color: blueviolet;
        float: left;
        margin-left: -100%;
        position: relative;
        left: -200px;
    }
    .right{
        width: 220px;
        height: 400px;
        background-color:chocolate;
        float: left;
        margin-left:-220px;
        position: relative;
        right: -220px;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="center">中间盒子</div>
        <div class="left">左边盒子</div>
        <div class="right">右边盒子</div>
    </div>
</body>
</html>

zh_1130

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS三栏布局-圣杯布局

这里写自定义目录标题圣杯布局具体步骤功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入圣杯布局**圣杯布局的作用：**...
复制链接

扫一扫