谈谈一些有趣的CSS题目(9)-- 巧妙的多列等高布局

@chokcoco 2019-03-18 11:23:59发表于 chokcoco/iCSS 技巧

9、巧妙的多列等高布局

规定下面的布局,实现多列等高布局。

<div id="container">
    <div class="left">多列等高布局左</div> 
    <div class="right">多列等高布局右</div>
</div>

多列等高布局,算是比较常见的一种布局,要求两列布局看上去高度一致(就是通常是两列背景色一致)。

如果只是两列背景颜色高度一致,有很多方法可以实现。

法一、使用 display:flex 的方式实现

Demo戳我:display:flex

法二、使用正负 margin 与 padding 相冲的方式实现

Demo戳我:正负 margin 与 padding 相冲

法三、父容器设置背景色实现

Demo戳我:父容器设置背景色

法四、父容器多重背景色--线性渐变

Demo戳我:线性渐变

法五、display:table-cell 实现

Demo戳我:display:table-cell


最后,新开通的公众号求关注,形式希望是更短的篇幅,质量更高一些的技巧类文章,包括但不局限于 CSS:

image