html - 使用 display:table-cell 时无法在 div 之间留出空格

Question

我想对齐 3 个 div，彼此相邻。所以我习惯display:table了父 div 和display:table-cell内部 3 个 div。

前 2 个 div 的宽度是已知的，而第 3 个 div 的宽度是未知的。所以使用display:table-cell非常适合我来调整第三个 div 的宽度。

现在，如果我想使用margin-leftor给出 3 个 div 之间的间距margin-right，则没有效果。请在此处检查代码。

让我知道我们是否可以这样做。提前致谢。

Answer 1

这应该有效：

 #wrapper div {
      display: table-cell;
      height:100px;
      /* creates space */
      border:5px solid transparent;
      background-clip:padding-box;
  }

您可能希望通过以下方式设置不同的 box-model 以将边框包含在元素的宽度中：

box-sizing:border-box;

Answer 2

使用边框属性给空间

border:solid 10px transparent;

Answer 3

尝试这个

#wrapper {
    display: table;
    table-layout: fixed;
    width:100%;
    height:100px;
    background-color:Gray;
    border-spacing:10px;
}

演示。

Answer 4

表格单元格不能有边距。您可以通过使用透明边框对其进行一些调整，如果这不能解决您的问题，那么就没有其他办法了。