为什么这个 table-cell 与相邻的 table-cell 重叠?
Why does this table-cell overlap the table-cell adjacent to it?
这是一个 SSCCE,展示了一个 div 和 display:table,三个 child 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="#"><</a>
<div class="post-slide">.
<!--<div class="left-part">.</div>
<div class="right-part">.</div>-->
</div>
<a class="next-slide-arrow" href="#">></a>
</div>
因为您将第一个单元格向右移动了 20 像素:
position: relative;
left: 20px;
然后,如 Relative positioning 中所述,它与下一个单元格重叠。
Once a box has been laid out according to the normal flow or floated,
it may be shifted relative to this position. This is called relative
positioning. Offsetting a box (B1) in this way has no effect on the
box (B2) that follows: B2 is given a position as if B1 were not offset
and B2 is not re-positioned after B1's offset is applied. This implies
that relative positioning may cause boxes to overlap.
相反,我会为 table:
添加一些边距
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="#"><</a>
<div class="post-slide">.</div>
<a class="next-slide-arrow" href="#">></a>
</div>
我不会手动移动按钮和东西,尝试添加 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;
}
这允许计算机像 table 一样定位所有内容,并且由于您在 html 文档中编写元素的宽度和顺序,它应该可以工作。
这是一个 SSCCE,展示了一个 div 和 display:table,三个 child 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="#"><</a>
<div class="post-slide">.
<!--<div class="left-part">.</div>
<div class="right-part">.</div>-->
</div>
<a class="next-slide-arrow" href="#">></a>
</div>
因为您将第一个单元格向右移动了 20 像素:
position: relative;
left: 20px;
然后,如 Relative positioning 中所述,它与下一个单元格重叠。
Once a box has been laid out according to the normal flow or floated, it may be shifted relative to this position. This is called relative positioning. Offsetting a box (B1) in this way has no effect on the box (B2) that follows: B2 is given a position as if B1 were not offset and B2 is not re-positioned after B1's offset is applied. This implies that relative positioning may cause boxes to overlap.
相反,我会为 table:
添加一些边距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="#"><</a>
<div class="post-slide">.</div>
<a class="next-slide-arrow" href="#">></a>
</div>
我不会手动移动按钮和东西,尝试添加 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;
}
这允许计算机像 table 一样定位所有内容,并且由于您在 html 文档中编写元素的宽度和顺序,它应该可以工作。