三栏布局

最新推荐文章于 2021-04-15 16:12:57 发布

Leo__Summer

最新推荐文章于 2021-04-15 16:12:57 发布

阅读量363

点赞数

分类专栏： Css

本文链接：https://blog.csdn.net/Leo__Summer/article/details/79495412

版权

Css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

圣杯布局：

<!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;
        }
        .wrapper {
            padding: 0 100px;
            overflow: hidden;
        }
        .middle, .left , .right {
            float: left;
            position: relative;
        }
        .middle {
            width: 100%;
            height: 200px;
            background: red;

        }
        .left {
            width: 100px;
            height: 100px;
            background: yellow;
            margin-left: -100%;
            left: -100px;
        }
        .right {
            width: 100px;
            height: 100px;
            background: blue;
            margin-left: -100px;
            right: -100px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="middle"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

三栏布局，中间内容区（middle）放在最前面，因为最先渲染，设置width：100%，给left和right设置宽、高、颜色
middle，left，right同时设置float：left，此时会出现以下情况

3. 我们需要把left和right放到左右两边，利用负边距，left设置margin-left：-100%，right设置margin-left：-100px

4. 这时位置正确了，但是覆盖了middle，需要给三者的父级加一个padding：0 100px，留出left和right的位置，然后设置left：-100px，right：-100px，最后还需要给三者加一个共同属性position：relative定位

双飞翼布局：

1.与圣杯布局最大的区别是解决内容覆盖的方式不同。

2.去掉共同的父级wrapper，给middle加一个父级middle-wrap，属性设置为margin：0 100px，同时取消三者共同属性position：relative，也不用给left和right去调整位置。

<!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;
        }
        .middle, .left , .right {
            float: left;
        }

        .middle {
            width: 100%;
            height: 200px;
            background: red;

        }
        .middle-wrap {
            margin: 0 100px;
        }
        .left {
            width: 100px;
            height: 100px;
            background: yellow;
            margin-left: -100%;

        }
        .right {
            width: 100px;
            height: 100px;
            background: blue;
            margin-left: -100px;

        }
    </style>
</head>
<body>
    <div class="middle">
        <div class="middle-wrap">
           奥克兰的加拉时间到拉萨的骄傲了斯柯达就爱上了肯德基阿喀琉斯拉克丝建档立卡是觉得卡收到卡时间很多卡就是电话卡接收到卡萨丁黄金卡速度哈空间收到货
        </div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</body>
</html>

flex布局：

只需按照left，middle，right排列

<!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;
        }
        .wrapper {
            display: flex;
        }
        .left {
            flex-basis:100px;
            height: 100px;
            background: blue;
        }
        .middle {
            flex: 1;
            height: 200px;
            background: red;

        }
        .right {
            flex-basis:100px;
            height: 100px;
            background: blue;

        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
</body>
</html>

Leo__Summer

关注

0
点赞
踩
0

收藏

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

圣杯布局：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫

专栏目录