为什么这个表格单元格与相邻的表格单元格重叠？答案

【问题标题】：Why does this table-cell overlap the table-cell adjacent to it?为什么这个表格单元格与相邻的表格单元格重叠？
【发布时间】：2015-10-25 15:13:33
【问题描述】：

JSFiddle here.

这是一个 SSCCE，演示了一个带有 display:table 的 div，其中三个子 div 具有一个 display:table-cell。问题是 .blog-post-slide 与 .previous-slide-arrow 重叠，而不是与其相邻。

问题是为什么，我应该如何解决这个问题。

.post-main-area {
  display: table;
  width: 100%;
}
.post-main-area .previous-slide-arrow,
.post-main-area .next-slide-arrow {
  border: 5px solid green;
  /*check*/
  width: 5%;
  display: table-cell;
  position: relative;
  vertical-align: middle;
  left: 20px;
}
.post-main-area .next-slide-arrow {
  left: auto;
  right: 20px;
}
.post-slide {
  border: 5px solid wheat;
  /*check*/
  width: 90%;
  position: relative;
}

<div class="post-main-area">
  <a class="previous-slide-arrow" href="#">&lt;</a>

  <div class="post-slide">.
    <!--<div class="left-part">.</div>
			<div class="right-part">.</div>-->
  </div>

  <a class="next-slide-arrow" href="#">&gt;</a>
</div>

【问题讨论】：

标签： css css-position css-tables

【解决方案1】：

因为您将第一个单元格向右移动了 20px：

position: relative;
left: 20px;

然后，如Relative positioning 中所述，它与以下单元格重叠。

一旦一个盒子按照正常流程布局或浮动，它可以相对于这个位置移动。这被称为 relative 定位。以这种方式偏移一个框（B1）对后面的框 (B2)：给 B2 一个位置，就好像 B1 没有偏移一样并且在应用 B1 的偏移量后 B2 不会重新定位。这意味着相对定位可能会导致框重叠。

相反，我会在表格中添加一些边距：

width: calc(100% - 40px);
margin: 0 20px;

.post-main-area {
  display: table;
  width: calc(100% - 40px);
  margin: 0 20px;
}
.post-main-area .previous-slide-arrow,
.post-main-area .next-slide-arrow {
  border: 5px solid green;
  width: 5%;
  display: table-cell;
  vertical-align: middle;
}
.post-slide {
  border: 5px solid wheat;
}

<div class="post-main-area">
  <a class="previous-slide-arrow" href="#">&lt;</a>
  <div class="post-slide">.</div>
  <a class="next-slide-arrow" href="#">&gt;</a>
</div>

【讨论】：

【解决方案2】：

我不会手动移动按钮和东西，尝试添加 display:table-cell;到 .post-slide {} 并摆脱所有 left: 和 right: 这样的属性；

.post-main-area {
  display: table;
  width: 100%;
}
.post-main-area .previous-slide-arrow,
.post-main-area .next-slide-arrow {
  border: 5px solid green;
  /*check*/
  width: 5%;
  display: table-cell;
  position: relative;
  vertical-align: middle;
}
.post-slide {
  border: 5px solid wheat;
  display: table-cell;
  /*check*/
  width: 90%;
  position: relative;
}

这允许计算机像表格一样定位所有内容，并且由于宽度和您在 html 文档中编写元素的顺序，它应该可以工作。

【讨论】：