Question

我在下面的代码中主要关注表格显示。

* {
  box-sizing: border-box;
}

.mother {
  width: 300px;
  margin: 2em auto;
  background: peachpuff;
  display: table;
}

.child {
  display: inline-table;
  width: 100px;
  height: 100px;
  background: cyan;
  border: 1px solid #7a7a7a;
}

<div class="mother">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

我的问题是子框（.child）没有完全包裹，留下一些小空格。问题是，是因为display: table还是display: inline-table？如果是，我应该使用什么display值来防止留下空格？

我的另一个问题是，当我将display的值.mother更改为table而.child更改为table-cell时，无论是儿童元素都适合自己父元素的宽度。例如，如果.mother的宽度为300px且每个子宽度为100px，则每行应该只包含3个子元素，以完全适合父元素的长度。使用display: flex，可以使用flex-wrap解决问题。我应该在这个问题上使用什么属性？

Answer 1

将font-size: 0添加到父元素。

* {
  box-sizing: border-box;
}

.mother {
  width: 300px;
  margin: 2em auto;
  background: peachpuff;
  display: table;
  font-size: 0;
}

.child {
  display: inline-table;
  width: 100px;
  height: 100px;
  background: cyan;
  border: 1px solid #7a7a7a;
}

<div class="mother">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

Answer 2

是的，这是因为display:inline-table对于孩子来说。它使它们表现为包含在外部表的单个匿名“单元”中的独立内联级容器。

不幸的是，CSS表格显示中没有表格行换行。将单元格移动到新行的唯一方法是使用display:table-row的额外包装器。为什么display:flex不适合？

Answer 3

* {
  box-sizing: border-box;
}

.mother {
  width: 300px;
  margin: 2em auto;
  background: peachpuff;
  display: table;
  font-size: 0;
}

.child {
  display: inline-table;
  width: 100px;
  height: 100px;
  background: cyan;
  border: 1px solid #7a7a7a;
  margin: -5px -2px;
}

<div class="mother">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

这有点hacky但它可能会解决你的问题。

CSS中表格显示的问题和进一步的想法

3 个答案: