Question

现在，我有一组在CSS中设置为$('.ga-track').on('click', function(){ ga('send', $(this).data('category'), $(this).data('action'), $(this).data('label'), $(this).data('value'), $(this).data('interaction')); });的列。每列的display: table-cell为280px，min-width为360px。唯一的问题是我希望这些列的大小相同。也就是说，我希望每列的列都与最宽的列一样宽。我可以写一些可以做到这一点的JavaScript。有没有办法用CSS做到这一点？

如果可能更好的话，我也许可以使用flexbox。

Answer 1

这是否按预期工作？

.table {
  display: flex;
  flex-direction: row;
}

.column {
  min-width: 280px;
  max-width: 360px;
  flex: 1;
}

<div class="table">
  <div class="column">
    <div class="cell">bla bla bla</div>
    <div class="cell">bla bla blabla bla bla</div>
    <div class="cell">bla bla bla</div>
  </div>
  <div class="column">
    <div class="cell">bla bla bla</div>
    <div class="cell">bla bla blabla bla bla</div>
    <div class="cell">bla bla bla</div>
  </div>
  <div class="column">
    <div class="cell">bla bla blabla bla blabla bla bla</div>
    <div class="cell">bla bla bla</div>
    <div class="cell">bla bla bla</div>
  </div>
</div>

有没有办法让CSS table-cell div具有相等的宽度？

1 个答案: