Question

我需要创建一个布局，其中有三列，每列中相应的行需要具有相同的高度。对此的要求是。

三栏
每列内部有多行。
每个相应的行必须是相同的高度。
在移动设备上，列将变为滑块。

我考虑了2个布局选项。

定位每列中的每一行，并使用Javascript

<div class="container">
  <div class="col">
    <div class="row">row 1</div>
    <div class="row">row 2</div>
    <div class="row">row 3</div>
  </div>
  <div class="col">
    <div class="row">row 1</div>
    <div class="row">row 2</div>
    <div class="row">row 3</div>
  </div>
  <div class="col">
    <div class="row">row 1</div>
    <div class="row">row 2</div>
    <div class="row">row 3</div>
  </div>
</div>

这种布局非常理想，因为我可以定位列并添加投影样式，而无需定位每一行并应用于每一行。由于有三个容器列，因此在移动设备上实现滑块会更容易。但是，循环遍历每一列并获取相应的行并更新每一列的高度似乎很多工作，特别是因为每次有api调用时都需要重新计算高度（上面有过滤器允许你更新数据）。

使用flex

<div class="container">
  <div class="row">
    <div class="col">
      row 1 col 1
    </div>
    <div class="col">
      row 1 col 2
    </div>
    <div class="col">
      row 1 col 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      row 2 col 1
    </div>
    <div class="col">
      row 2 col 2
    </div>
    <div class="col">
      row 2 col 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      row 3 col 1
    </div>
    <div class="col">
      row 3 col 2
    </div>
    <div class="col">
      row 3 col 3
    </div>
  </div>
</div>

这种方法很吸引人，因为我不需要使用JS来设置每列中每个相应行的高度。但是，我需要设置各个样式，如每个行的阴影，这意味着我需要使用各种各样的技巧，以免将阴影应用到每行的顶部和底部，还存在风险这将无法在不同的浏览器中正确显示（需要回到IE 10）。我能够激活的唯一滑块效果是溢出滚动，不符合要求。

所以，我的问题是，还有其他选择我不考虑吗？你会做什么？

Answer 1

我会考虑选项1，原因如下：

您的标记在语义上是正确的（3列，每列有一些行）并且干净
您可以轻松应用列样式
循环遍历所有行只是为了计算最大高度并不麻烦，特别是如果你只有几行。

使用vanilla JavaScript的解决方案可能如下所示。每当应用过滤器时，您都可以将代码包装到函数中并调用它：

var rows = document.querySelectorAll(".col:nth-child(1) > .row").length, n
for (n = 1; n <= rows; ++n) {
  var cells = document.querySelectorAll('.row:nth-child(' + n + ')')
  var maxHeight = 0, i
  for (i = 0; i < cells.length; ++i) {
    maxHeight = (cells[i].clientHeight > maxHeight) ? cells[i].clientHeight : maxHeight
  }
  cells.forEach(function(cell){
    cell.style.height = Number(maxHeight-10) + 'px'
  })
}

.col {
  display: inline-block;
  width: calc(33% - 41px);
  margin: 10px 10px;
  padding: 10px;
  border-radius: 15px;
  box-shadow: 0 0 20px #aaa;
  vertical-align: top;
}
.row {
  border-top: 3px solid black;
  margin: 5px 0;
  padding: 5px;
}

<div class="container">
  <div class="col">
    <div class="row">row 1 Compare text 1</div>
    <div class="row">row 2</div>
    <div class="row">row 3</div>
  </div>
  <div class="col">
    <div class="row">row 1 Compare text 1 this text is longer</div>
    <div class="row">row 2</div>
    <div class="row">row 3 with a little more text</div>
  </div>
  <div class="col">
    <div class="row">row 1 Compare text 1 this text is even much much longer</div>
    <div class="row">row 2</div>
    <div class="row">row 3</div>
  </div>
</div>

三列高度相等，每列对应行

1 个答案: