谈谈一些有趣的CSS题目(9)-- 巧妙的多列等高布局
chokcoco opened this issue · comments
Coco commented
9、巧妙的多列等高布局
规定下面的布局,实现多列等高布局。
<div id="container">
<div class="left">多列等高布局左</div>
<div class="right">多列等高布局右</div>
</div>
多列等高布局,算是比较常见的一种布局,要求两列布局看上去高度一致(就是通常是两列背景色一致)。
如果只是两列背景颜色高度一致,有很多方法可以实现。
法一、使用 display:flex
的方式实现
法二、使用正负 margin 与 padding 相冲的方式实现
法三、父容器设置背景色实现
法四、父容器多重背景色--线性渐变
法五、display:table-cell
实现
最后,新开通的公众号求关注,形式希望是更短的篇幅,质量更高一些的技巧类文章,包括但不局限于 CSS:
小米飞刀 commented
方法三: 为什么给父元素设置白色 #ffffff 就不行呢 ?