同行元素与最高的元素高度保持统一
效果
效果分析
看红框和绿框两个元素，他们的高度实际是不一样的(两个高度都不是固定高度，而是动态高度，会随内容的增加而自动增高)，但最终绿框保持了和红框元素的高度一致
实现方案
html 结构
html
<ul>
<li>
<div><strong>字段A</strong><span>字段A内容</span></div>
</li>
<li>
<div><strong>字段A</strong><span>字段A内容</span></div>
</li>
<li>
<div><strong>字段B</strong><span>字段B内容字段B内容字段B内容字段B内容字段B内容</span></div>
</li>
<li>
<div><strong>字段A</strong><span>字段A内容</span></div>
</li>
<li>
<div><strong>字段B</strong><span>字段B内容字段B内容字段B内容字段B内容字段B内容</span></div>
</li>
<li>
<div><strong>字段B</strong><span>字段B内容字段B内容字段B内容字段B内容字段B内容</span></div>
</li>
</ul>
方案一：flex 方案
对于现代浏览器 flex 方案是个不错的解决方式，简单而优雅. 如果不考虑打印预览，推荐此方案
优点
- 实现方案简单，现代浏览器全兼容
缺点
- 打印预览有问题，因为 li 如果内容过多，处于换页部分的内容，可能会被截断，即有的文字，一半在上一页，一半在这一页
css
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
li {
width: 30%;
}
方案一：display:inline-block + display: table + display: table-cell 方案
实现相对于方案一而言相对复杂, 但能达到同样的效果，且打印预览也能保证 li 的内容都在同一页
css
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: block;
}
li {
width: 30%;
/* 让li在一行显示 */
display: inline-block;
/* 让高度不一致的li，在垂直方向上，保持顶部对齐 */
vertical-align: top;
/* 保证li内容在同一页 */
page-break-inside: avoid;
}
/* table+table-cell方式让strong和span的高度与高的那个保持一致 */
div {
display: table;
}
strong {
display: table-cell;
width: 50pt;
margin-right: 5pt;
&::after {
content: ':';
}
}
span {
display: table-cell;
white-space: pre-wrap;
word-break: break-all;
overflow-wrap: break-word;
}