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

Question

我想在border-bottom之间添加post。但是我的帖子是由精选图片创建的，而wrap是由父母div创建的。

赞：

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

由于某种原因，我必须在类border-bottom中添加except，但它只会为此元素画一条线。我希望属性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

Answer 2

我是否正确理解：您希望在{% for single_news in news %} {% include 'news.twig' %} {% endfor %} 的整个长度上都以边框为底？ 如果是这样，您需要删除wrapper

margin-left: 350px;

代码段：

.except {
    min-height: 235px;
    border-bottom: solid 1px #000;
}

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