如何在DIV中定位<hr />

Question

如何将行<hr>放在按钮和底部文本块之间某处文本块底部上方约15 px处？

＆＃13;

＆＃13;

.box {
  background: white;
  float: right;
  position: relative
}

.space {
  padding: 15px;
}

img {
  max-width: 100%;
}

.button {
  position: absolute;
  bottom: 40px;
  margin-left: 15px;
}

@media (max-width:768px) {
  .button {
    position: relative;
    bottom: auto;
    margin-left: 15px;
  }
}

＆＃13;

<div class="box">

  <img class="box" src="https://d2f0ora2gkri0g.cloudfront.net/e4/16/e4164876-1967-4303-9a57-aae00eb2b22b.png" alt="oproeien" style="margin-right:0px; margin-left:0px">

  <h2 class="space">Amsterdam</h2>

  <p class="space">Amsterdam is de (titulaire) hoofdstad en naar inwonertal de grooteeuw tot stadsuitbreidingen, waaronder de laatste grachten van de fortificatie die nu als grachtengordel bekend is en in 2010 is toegevoegd aan de UNESCO-Werelderfgoedlijst.</p>

  <a class="button" href="https://www.buienradar.nl">Slecht weer</a>

  <hr>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

为什么不简单地使用padding轻松控制文本边框：

.box {
  background: white;
  float: right;
  position: relative
}

.space {
  padding: 15px;

}
p.space {
   border-bottom:1px solid #000;
}
img {
  max-width: 100%;
}

.button {
  position: absolute;
  bottom: 40px;
  margin-left: 15px;
}

@media (max-width:768px) {
  .button {
    position: relative;
    bottom: auto;
    margin-left: 15px;
  }
}

<div class="box">

  <img class="box" src="https://d2f0ora2gkri0g.cloudfront.net/e4/16/e4164876-1967-4303-9a57-aae00eb2b22b.png" alt="oproeien" style="margin-right:0px; margin-left:0px">

  <h2 class="space">Amsterdam</h2>

  <p class="space">Amsterdam is de (titulaire) hoofdstad en naar inwonertal de grooteeuw tot stadsuitbreidingen, waaronder de laatste grachten van de fortificatie die nu als grachtengordel bekend is en in 2010 is toegevoegd aan de UNESCO-Werelderfgoedlijst.</p>

  <a class="button" href="https://www.buienradar.nl">Slecht weer</a>


</div>

如果你想控制线条的宽度，你可以考虑线性渐变技巧（或伪元素）：

.box {
  background: white;
  float: right;
  position: relative
}

.space {
  padding: 15px;

}
p.space {
   background:linear-gradient(to bottom,transparent calc(100% - 1px),#000 0) 0 0/50% 100% no-repeat;
}
img {
  max-width: 100%;
}

.button {
  position: absolute;
  bottom: 40px;
  margin-left: 15px;
}

@media (max-width:768px) {
  .button {
    position: relative;
    bottom: auto;
    margin-left: 15px;
  }
}

<div class="box">

  <img class="box" src="https://d2f0ora2gkri0g.cloudfront.net/e4/16/e4164876-1967-4303-9a57-aae00eb2b22b.png" alt="oproeien" style="margin-right:0px; margin-left:0px">

  <h2 class="space">Amsterdam</h2>

  <p class="space">Amsterdam is de (titulaire) hoofdstad en naar inwonertal de grooteeuw tot stadsuitbreidingen, waaronder de laatste grachten van de fortificatie die nu als grachtengordel bekend is en in 2010 is toegevoegd aan de UNESCO-Werelderfgoedlijst.</p>

  <a class="button" href="https://www.buienradar.nl">Slecht weer</a>


</div>