为什么此表单元格与相邻的表单元格重叠

Question

JSFiddle here.

这是一个 SSCCE 演示了一个带有显示：表的div，其中包含三个具有显示：表单元格的子div。问题在于 .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>

Answer 1

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

position: relative;
left: 20px;

然后，如相对定位中所述，它与以下单元格重叠。

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

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

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>

Answer 2

我不会手动移动按钮和其他东西，尝试添加 display：table-cell; 到 .post-slide {} 并摆脱所有左边：和右边：这样的属性;

.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文档中编写元素的宽度和顺序，它应该可以工作。