css的相同宽度和高度列[重复]

Question

要求是设置列的等高和等宽。我为此使用了css属性显示表格单元格，它在相等高度方面工作正常，但在相等宽度方面效果不佳。我知道从技术上讲它工作正常，但我想让它的宽度相等。所以无论一张表是四列还是一列，它都应该有一个宽度。

我也寻找过 flex，但 IE9 不支持它，并且与移动浏览器存在一些兼容性问题。我已经思考并尝试了很多方法，但没有得到解决方案。如果您想尝试一下，这里是fiddle。

HTML

.table {
  display: table;
  width: 100%;
  height: 100%
}
.cell {
  display: table-cell;
  padding: 0 10px;
  width: 23.8%;
  height: 100%
}
.white-box {
  border: solid 1px #ccc;
  background: #eee;
  height: 100%
}

<div class="table">
  <div class="cell">
    <div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  </div>
  <div class="cell">
    <div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  </div>
  <div class="cell">
    <div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  </div>
  <div class="cell">
    <div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  </div>
</div>
<br>
<div class="table">
  <div class="cell">
    <div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  </div>
  <div class="cell">
    <div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  </div>
</div>

Answer 1

要使其工作，您需要 3 个级别：表格 - 表格行 - 表格单元格。

<div class="table">
   <div><!-- style="display:table-row" assumed -->
      <div class="cell">
          <div class="white-box>.....</div>
      </div>
      <div class="cell">
          <div class="white-box>.....</div>
      </div>
   </div>
   <!-- repeat rows -->
</div>

Answer 2

您可以使用vw 单位指定宽度。不过，这个单位有一些怪癖。例如，它包括滚动条和主体上的边距/填充。

因此，如果您的目标是 25% 的可用宽度，您需要执行类似 calc(100vu - 17px - 20px) / 4 的操作。

.table {
  display: table;
  height: 100%;
}
.cell {
  display: table-cell;
  padding: 0 .5vw;
  width: 22vw;
  height: 100%;
}
.white-box {
  border: solid 1px #ccc;
  background: #eee;
  height: 100%;
}

<div class="table">
  <div class="cell">
    <div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  </div>
  <div class="cell">
    <div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  </div>
  <div class="cell">
    <div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  </div>
  <div class="cell">
    <div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  </div>
</div>
<br>
<div class="table">
  <div class="cell">
    <div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  </div>
  <div class="cell">
    <div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  </div>
</div>

Here is a fiddle 具有更精确的计算。