使网格布局div具有相同的高度

<style>
    .container {
        display: flex;
    }
    .item {
        flex: 1;
    }
</style>

<div class="container">
    <div class="item">内容1</div>
    <div class="item">内容2</div>
    <div class="item">内容3</div>
</div>

<style>
    .container {
        display: table;
    }
    .item {
        display: table-cell;
        vertical-align: top;
    }
</style>

<div class="container">
    <div class="item">内容1</div>
    <div class="item">内容2</div>
    <div class="item">内容3</div>
</div>

<script>
    window.onload = function() {
        var items = document.getElementsByClassName('item');
        var maxHeight = 0;
        for (var i = 0; i < items.length; i++) {
            if (items[i].offsetHeight > maxHeight) {
                maxHeight = items[i].offsetHeight;
            }
        }
        for (var i = 0; i < items.length; i++) {
            items[i].style.height = maxHeight + 'px';
        }
    }
</script>

<div class="container">
    <div class="item">内容1</div>
    <div class="item">内容2</div>
    <div class="item">内容3</div>
</div>