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

您可以指定宽度usine vw单位。这个单位虽然有些怪癖。例如，它包括滚动条和正文上的边距/填充。

因此，如果您定位的可用宽度的25％，则需要执行calc(100vu - 17px - 20px) / 4。

之类的操作

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

Here is a fiddle计算更准确。

Answer 2

要使它工作，你需要3个leveles：table - table-row - table-cell。

<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>

css

2 个答案: