为 div[display:table] 修复角单元格的单元格间距

Question

我正在为我的内部 css 框架开发一种基于 display: table 的网格方法，并且刚刚面临整个问题的关键问题。基本上，我希望我的布局看起来像这样：这里的灰色区域应该来自 cell-spacing 属性。理想情况下，源代码应该是这样的，没有什么新发明：

<div class="unit">
    <div class="one third"></div>
    <div class="two thirds"></div>
</div>

我说的问题来了。事实上，cell-spacing 是为所有单元格定义的，并用固定边距将它们包裹起来。在我的例子中，我不希望它在相应的边包裹角单元格（例如，所以左上角的单元格不会在顶部和左侧产生间距）。我想到的第一个明显的解决方案是使用负边距：

.unit {
    display: table;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    overflow: auto;

    border-spacing: 0.2em;
    margin: -0.2em;
}

不幸的是，这没有按预期工作。它确实删除了左上角的间距，但保留了右上角的间距。有解决这个问题的想法吗？

Answer 1

你的方法不错，问题是table不够宽。您可以使用 calc:

修复它

width: calc(100% + 2*0.2em);

然后，table 将比其包含块更宽。但这不是什么大问题，因为单元格会因为负边距而正确定位。你只需要在容器中添加overflow: hidden。

.wrapper {
  overflow: hidden;
}
.unit {
  display: table;
  overflow: auto;
  background: #aaa;
  border-spacing: 2em;
  margin: -2em;
  width: 100%; /* fallback */
  width: calc(100% + 2*2em);
}
.unit > * {
  display: table-cell;
  border: 2px solid;
  background: #fff;
}

<div class="wrapper">
  <div class="unit">
    <div class="one third">a</div>
    <div class="two thirds">b</div>
  </div>
</div>

为 div[display:table] 修复角单元格的单元格间距

Fixing cell-spacing for corner cells for div[display:table]

css

grid-layout

css-tables