Question

注意：我下面的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）布局＆amp;建议其他人也使用它，只需使用以下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>

Answer 2

<div align="center">
  <table id="tabular" cellpadding="0" cellspacing="0" border="2">
    <tr class="thead">
        <th width="10%" align="center" rowspan="2">something</th>
        <th width="20%" align="center" colspan="3">something</th>
        <th width="20%" align="center" colspan="3">something</th>
        <th width="20%" align="center" colspan="3">something</th>
    </tr>
    <tr class="thead">
      <th align="center">something</th>
      <th align="center">something</th>
      <th align="center">something</th>
      <th align="center">something</th>
      <th align="center">something</th>
      <th align="center">something</th> 
      <th align="center">something</th>
      <th align="center">something</th>
      <th align="center">something</th>
    </tr>
  </table>
</div>

Answer 3

如果你需要使用JS来做这件事，我会做这样的事情

var rows = document.querySelectorAll(".row");
var heights = Array.prototype.slice
.apply(rows)
.map(function(row) {
    return row.clientHeight;
}),
maxHeight = Math.max.apply(null, heights);

rows.forEach(function(row) {
    row.style.height = maxHeight + "px";
});

我建议您使用flexbox或css网格系统，例如bootstrap has

如何在Javascript中使用不均匀的div内容制作相同高度的行？

3 个答案: