html - 使用显示 :table-cell 时无法在 div 之间提供空格

Question

我想对齐 3 个 div，彼此相邻。所以我将 display:table 用于父 div，将 display:table-cell 用于内部 3 div。

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

现在，如果我想使用 margin-left 或 margin-right 在 3 个 div 之间设置间距，则没有效果。请查码here .

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

Answer 1

这应该有效:

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

您可能希望通过以下方式设置不同的框模型以在元素的宽度中包含边框:

box-sizing:border-box;