记录两种使用CSS实现等高布局的方法

最近开发遇到的问题：一行内的两个元素需要动态的等高，即左右两个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