等高布局

1、等高布局

等高布局在这里我介绍了三种不同的方法（以三栏为例）

第一种：

步骤：

三栏就写3个容器，这几个容器分别是爷爷，爸爸，儿子
三个容器都写宽度是100%；
给爸爸写相对定位，让爸爸向左侧移动30%，露出爷爷的30%
给儿子写相对定位，让儿子向左侧移动40%，露出爸爸的40%
给儿子里面写三栏，第一栏宽度30%，第二栏宽度40%，第三栏宽度30%
给儿子里的三栏写浮动，让他们在同一行显示
给第三栏设置相对定位，让他和爷爷露出的部分重合
给第二栏设置相对定位，让他和爸爸露出的部分重合
给第一栏设置相对定位，让他和儿子露出的部分重合
由于给儿子里的三栏写过浮动，儿子的高度变为0，所以要给儿子清除浮动，给儿子设置float：left
儿子浮动了，爸爸的高度撑不起来了，给爸爸清除浮动，给爸爸设置：float：left
爸爸浮动了，爷爷的高度撑不起来了，给爷爷清除浮动，给爷爷设置overflow：hidden（在这里清除浮动没有用float：left是因为它没有父元素了，会影响下面同级的元素）

这种等高布局不是看左中右三栏的高度，看的是三个容器（爷爷爸爸和儿子）的高度

代码：

    <style>
        *{
            margin: 0;
        }
        .grandpa{
            width: 100%;
            background: gray;
            overflow: hidden;
        }
        .father{
            width: 100%;
            background:green;
            position: relative;
            left:-30%;
            float: left;
        }
        .son{
            width: 100%;
            background:pink;
            position: relative;
            left: -40%;
            float: left;
        }
        .left{
            width: 30%;
            /* background: yellow; */
            float: left;
            position: relative;
            left: 70%;
        }
        .center{
            width: 40%;
            /* background: skyblue; */
            float: left;
            position: relative;
            left:70%;
        }
        .right{
            width: 30%;
            /* background: plum; */
            float: left;
            position: relative;
            left:70%;
        }
    </style>

<body>
<!-- 
    三栏等高布局
        第一栏宽度是30%；
        第二栏宽度是40%
        第三栏宽度是30%
        改变其中一栏的高度，另外两栏跟着改变
         -->
    <div class="grandpa">
        <div class="father">
            <div class="son">
                <div class="left">左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左</div>
                <div class="center">
　　　　　　　　　　　　　　中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中
　　　　　　　　　　　　　中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中
　　　　　　　　　　　　　中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中
　　　　　　　　　　</div>
                <div class="right">右</div>
            </div>
        </div>
    </div>
</body>

第二种：

Padding和margin互怼的办法

Padding-bottom是多少，就要给margin-bottom：负的多少，盒模型的高度依然还是内容的高度

步骤：

给三栏都设置浮动，让他们在同一行显示
给三栏都设置padding-bottom：9999px,和margin-bottom：-9999px
给他们的父元素设置overflow:hidden（一个作用是清除浮动，另一个作用是让超出盒子的部分隐藏掉）

问题：

给三栏加边框的话，下边框是看不见的

解决办法一、

单独写一个盒子，给盒子设置和下边框一样宽度和高度，相对于三栏的父元素定位

解决办法二、

做一个和下边框一样的图片

在大盒子外面包一个更大的盒子，给这个更大的盒子设置padding-bottom：露出下边框那么多

给这个更大的盒子插入背景图片

猜你喜欢