javascript - 如何在 Javascript 中使用不均匀的 div 内容制作等高的行？

Question

Working example

注意:我有下面对我有用的 JQuery 代码，但我必须使用 Javascript。 我有一个表，其中有两列。 列的每一行必须具有相同的高度，但每一行不包含完全相同数量的内容。 容器类“row”在第一列有 3 个 div，在第二列有 2 个 div。

这是我的 HTML

        <div class="table">
            <div class="column">
                <div class="row">
                    <div class="value-label">TEXT1</div>
                    <div class="compare-label">TEXT2</div>
                    <div class="comment-label">TEXT3</div>
                </div>
            </div>
            <div class="column">
                <div class="row">
                    <div class="value-label">TEXT1</div>
                    <div class="compare-label">TEXT2</div>
                </div>
            </div>
        </div>

我使用以下 JQuery 函数使行高相同:

                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
                    <script>
                        jQuery(document).ready(function($) { 
                            var heights = $(".row").map(function() {
                                return $(this).height();
                            }).get(),
                            maxHeight = Math.max.apply(null, heights);
                            $(".row").height(maxHeight);
                            });
                    </script>

我的问题是我的公司不允许使用 JQuery，我在尝试用 Javascript 完成同样的事情时遇到了很多问题。 我需要每列中行的高度相同，无论行内的 div 数量如何，但在 Javascript 中。

更新:忘记补充一点，在某些情况下，3 div 列将恢复为 2 div 列。因此，高度需要根据显示的 div 数量进行更改。这只是一行的示例。我有 5 行跨两列执行此操作。

Answer 1

使用我喜欢使用并推荐其他人使用的 flexbox(CSS3) 布局，只需使用以下 CSS 即可轻松实现上述目标:

.table {
  display: flex; // to initialize flex
  background: lightgrey;
  justify-content: center; // horizontally centers its child contents
}

.table .column {
  border: 1px solid black;
  flex-basis: 40%; // used similar to width property
  display: flex;
  justify-content: center;
}

.table {
  display: flex;
  background: lightgrey;
  justify-content: center;
}

.table .column {
  border: 1px solid black;
  flex-basis: 40%;
  display: flex;
  justify-content: center;
}

<div class="table">
  <div class="column">
    <div class="row">
      <div class="value-label">TEXT1</div> 
      <div class="compare-label">TEXT2</div> 
      <div class="comment-label">TEXT3</div>
    </div>
  </div>
  <div class="column">
    <div class="row">
      <div class="value-label">TEXT1</div>
      <div class="compare-label">TEXT2</div>
    </div>
  </div>
</div>