Question

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

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

ex

.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;
}

Answer 1

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

position: relative;
left: 20px;

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

一旦根据正常流量布置了一个盒子或浮动，它可能相对于这个位置移动。这称为 relative 定位。以这种方式偏移盒子（B1）对于没有影响随后的框（B2）：B2被给予一个位置，好像B1没有偏移应用B1的偏移后，B2不会重新定位。这意味着相对定位可能会导致框重叠。

相反，我会在表格中添加一些余量：

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

我不会手动移动按钮和东西，尝试添加display：table-cell; to .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文档中编写元素的顺序，它应该可以正常工作。

为什么这个表格单元格与它旁边的表格单元格重叠？

2 个答案: