多栏布局解决方案之圣杯布局

最新推荐文章于 2022-07-11 21:58:45 发布

秃头的甜甜圈

最新推荐文章于 2022-07-11 21:58:45 发布

阅读量158

点赞数 1

分类专栏：多栏布局

本文链接：https://blog.csdn.net/personaas/article/details/98520811

版权

多栏布局专栏收录该内容

4 篇文章 0 订阅

订阅专栏

圣杯布局即三列自适应布局（中间100%，两侧固定宽度）
步骤：
1.先浮动并排（先写中间盒子，再写两侧保证左右两侧盒子同时并排到右侧）
2.左右两侧盒子用负左外边距放到中间盒子的两侧（左侧盒子 margin-left: -100%（中间盒子宽度）; 右侧盒子 margin-left: -300px（自身宽度）;）
3.设置最外侧盒子的内边距（左右边距分别为左右盒子的宽度）把内容挤到中间
4.设置两侧盒子的相对定位移动到两边，把中心盒子的内容显示出来。（左侧盒子： position: relative; left: -300px; 右侧盒子： position: relative; right: -300px; 或者左侧盒子： position: relative; right: 300px;
右侧盒子： position: relative; 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>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        padding: 0px 300px;
    }
    .center{
        float: left;
        width: 100%;
        height: 300px;
        font-size: 20px;
        background-color: palevioletred;
    }
    .left{
        float: left;
        width: 300px;
        height: 300px;
        font-size: 20px;
        line-height: 300px;
        text-align: center;
        background-color: yellow;
        margin-left: -100%;
        position: relative;
        /* left: -300px; */
        right: 300px;
    }
    .right{
        float: left;
        width:300px;
        height: 300px;
        font-size: 20px;
        line-height: 300px;
        text-align: center;
        background-color: skyblue;
        margin-left: -300px;
        position: relative;
        left: 300px;
        /* right: -300px; */
    }
    </style>
</head>
<body>
    <div class="box">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>

第一步得到的：
在这里插入图片描述
第二步：

第三步：

第四步：