最近开发遇到的问题:一行内的两个元素需要动态的等高,即左右两个div的高度是不确定的,但是需要等高排列
当时考虑了好久,网上也有很多的解决方案,但大多都是固定高度的,不太符合实际的要求,于是在此记录一下:
1.使用flex布局的自适应高度(推荐)
<div style="display:flex;width: 200px;">
<div style="flex:1;border:1px solid #AAA;word-break: break-word;">
1111111111111111111111111111111111111111111111111
</div>
<div style="flex:1;border:1px solid #AAA">
2222
</div>
</div>
2.使用table布局中的table-cell
<div style="display:table;width: 400px;">
<div style="display:table-cell">12122</div>
<div style="display:table-cell;word-break: break-word;">
111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
</div>
</div>
以上两种情况都会根据填充的内容进行动态的调整div的高度,希望对各位有所帮助
over