前端开发-布局技巧

1、等高布局

等高布局是指多列子元素在父元素中实现等高视觉效果的布局技巧。

1.1、实现要点（需求）

• 多列

• 每一列背景不同

• 其中任意一列变高，其它列同步变高

1.2、方法一

1.2.1、原理

利用padding和margin负值相抵消

• 利用padding提前延伸背景

• 利用margin负值抵销padding的占位

    <div class="wrap">
        <div class="left">当前，新冠疫情的防疫已进入新常态新阶段，如何防患于未然，把基层常态化防控的藩篱扎得更牢，显得愈加重要。今天，雨绸缪为未来应对重大呼吸疾病做好更充分的准备，同时开展一对一的心理关爱计划，为奋战在一线的白衣</div>
        <div class="center">当前，新冠疫情的防疫已进入新常态</div>
        <div class="right">当前，新冠疫情的防疫已进入新常态新阶段，如何防患于未然，把基层常态化防控的藩篱扎得更牢，显得愈加重要。今天，星巴</div>
    </div>

       .wrap{
            width:600px;
            border:10px solid #000;
            overflow: hidden;
        }
        .wrap::after{
            content:"";
            display: block;
            clear: both;
        }
​
        .left,.center,.right{
            float:left;
​
            padding-bottom:1000px;
            margin-bottom:-1000px;
        }
​
        .left{
            width:200px;
            /* 最小高度 ----指定盒子可以大于等于100px */
            min-height:100px;
            background-color:pink;
        }
        .center{
            width:200px;
            /*