1

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

  1. 三列
  2. 每列内有多行。
  3. 每个对应的行必须具有相同的高度。
  4. 在移动设备上，这些列将变成一个滑块。

在此处输入图像描述

我为此考虑了 2 个布局选项。

  1. 定位每列中的每一行并使用 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 时都需要重新计算高度（上面的过滤器允许您更新数据）。

  1. 使用弹性

<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）。此外，我能够激活的唯一滑块效果是溢出滚动，它不符合要求。

所以，我的问题是，还有其他我没有考虑的选择吗？你会怎么办？

4

1 回答 1

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>

于 2018-03-24T10:34:17.690 回答