Question

我希望div display: table-cell的{{1}}设置百分比宽度。 display: table-cell是我最好的选择，我需要几个并排div s才能达到相同的高度。

经过研究，我已将父级设置为display: table; table-layout: fixed; width: 100% table-cell，但.table-wrapper { display: table; table-layout: fixed; width: 100%; } .table-cell { display: table-cell; width: 25%; overflow: hidden !important; border: 1px solid black; }仍然填充了父级。

<div class="table-wrapper">
  <div class="table-cell">
    Should be 25%, but it fills .table-wrapper
  </div>
</div>

{{1}}

这不可能吗？

Answer 1

您可以使用单个块元素解决此问题。

＆＃13;

.table-wrapper {
  display: table;
  table-layout: fixed;
  width: 100%;
  border: 1px solid green;
}

.table-cell {
  display: table-cell;
  width: 25%;
  overflow: hidden !important;
  border: 1px solid black;
}

＆＃13;

<div class="table-wrapper">
  <div class="table-cell">
    Should be 25%, but it fills .table-wrapper
  </div>
  <div><div/>
</div>

＆＃13;

Answer 2

一个标签总是会填满它，因为每个人的末尾都有一个回车...这对他们来说是非常狡猾的，没有任何文件！但是，尽管如此。所以，我建议使用一个没有回车的标签。希望减少一些挫折......我必须学习艰难的方式！

即使使用表固定，CSS table-cell也会忽略宽度

2 个答案: