CSS 多列等高的几种实现方式 css

什么是多列等高简单的说，就是多个列，但是所有列的高度都希望以最高的那个列为准。
如下图，每个列的高度都靠里面的内容撑起来。

文章图片

但是有些情况我们需要每个列能与最高的那个列等齐。如下图：

文章图片

实现

利用 padding、margin 来实现
table 布局实现
flex 布局实现

【CSS 多列等高的几种实现方式】来直接看看测试代码吧，可以直接复制代码，查看结果

多列等高 > /* 公共样式 */ ul { list-style: none; padding: 0; margin: 0; } ul li { background: #0b88ec; } ul li p { padding: 10px; margin: 0; color: #fff; }/* padding margin 实现样式 */ .test-1 ul { overflow: hidden; } .test-1 li { float: left; width: 33.33%; padding-bottom: 9999px; margin: 0 0 -9999px 0; }/* table 实现样式 */ .test-2 ul { display: table; } .test-2 li { display: table-cell; width: 33.33%; }/* flex 实现样式 */ .test-3 ul { display: box; display: -webkit-flex; display: flex; } .test-3 li { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; width: 0; } padding margin 实现: 步子不非得迈得大，只要朝着正确的方向前进就行。步子不非得迈得大，只要朝着正确的方向前进就行。步子不非得迈得大，只要朝着正确的方向前进就行。步子不非得迈得大，只要朝着正确的方向前进就行。步子不非得迈得大，只要朝着正确的方向前进就行。步子不非得迈得大，只要朝着正确的方向前进就行。 table 实现: 步子不非得迈得大，只要朝着正确的方向前进就行。步子不非得迈得大，只要朝着正确的方向前进就行。步子不非得迈得大，只要朝着正确的方向前进就行。步子不非得迈得大，只要朝着正确的方向前进就行。步子不非得迈得大，只要朝着正确的方向前进就行。步子不非得迈得大，只要朝着正确的方向前进就行。 flex 实现: 步子不非得迈得大，只要朝着正确的方向前进就行。步子不非得迈得大，只要朝着正确的方向前进就行。步子不非得迈得大，只要朝着正确的方向前进就行。步子不非得迈得大，只要朝着正确的方向前进就行。步子不非得迈得大，只要朝着正确的方向前进就行。步子不非得迈得大，只要朝着正确的方向前进就行。