html - 子div的边框长度与父div的宽度相同吗？

Question

我想在 post 之间添加一个 border-bottom。但是我的帖子是由特色图片创建的，除了父 div 的 wrap。

像这样:

.wrapper {
    position: relative;
    padding-bottom: 48px;
}
.thumbnail {
    position: absolute;
    left: 0;
    top: 0;
}
.except {
    margin-left: 350px;
    min-height: 235px;
    border-bottom: solid 1px #000;
}

<div class="wrapper">
    <div class="thumbnail">
          <img width="324" height="212" src="https://sharengay.com/wp-content/uploads/2018/07/banner-thu-thuat-xem-phim-netflix-324x212.jpg">
    </div>
    <div class="except">
          <span> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</span>
    </div>
</div>
<div class="wrapper">
    <div class="thumbnail">
          <img width="324" height="212" src="https://sharengay.com/wp-content/uploads/2018/07/banner-thu-thuat-xem-phim-netflix-324x212.jpg">
    </div>
    <div class="except">
          <span> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</span>
    </div>
</div>

出于某种原因，我必须在 except 类中添加 border-bottom 但它只为该元素绘制一条线。我想要属性 border-bottom 在元素 wrapper 中是完整的。

您可以在此处的生产网站上进行测试:https://sharengay.com

你可以看到当前是这样的:

Answer 1

把它包在一个div里

.wrapper {
    position: relative;
    padding-bottom: 48px;
}
.thumbnail {
    position: absolute;
    left: 0;
    top: 0;
}
.except {
    margin-left: 350px;
    min-height: 235px;

}
.subwrapper { /* Target */
  border-bottom: 2px solid #000;
  margin-bottom: 20px;
}

<div class="wrapper">
  <div class="subwrapper">
    <div class="thumbnail">
          <img width="324" height="212" src="https://sharengay.com/wp-content/uploads/2018/07/banner-thu-thuat-xem-phim-netflix-324x212.jpg">
    </div>
    <div class="except">
          <span> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</span>
    </div>
</div>
<div class="wrapper">
    <div class="thumbnail">
          <img width="324" height="212" src="https://sharengay.com/wp-content/uploads/2018/07/banner-thu-thuat-xem-phim-netflix-324x212.jpg">
    </div>
    <div class="except">
          <span> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</span>
    </div>
</div>

https://stackblitz.com/edit/angular-mpunwb