按钮固定位置

Question

我试着用margin-bottom来修正按钮，但是如果有更长的标题，它就不能工作了。

我的例子：照片

<div class="post-detail-container-div">
<br />
<div class="post-content-div">
<h3 class="post-title entry-title">
   <a href="vijest?id=<?php echo $p['link'];?>"><?php echo $p['naslov']; ?></a>
</h3>
<div class="spusti">
   <ul class="list-unstyled list-inline post-metadata">
      <li>
         <i class="far fa-calendar"></i> Mon, 06-09-2018&nbsp;&nbsp;| 
      </li>
      <li>
         <i class="far fa-comment"></i>&nbsp;
         <a href="#">Comments(10)</a>
      </li>
   </ul>
   <p class="post-excerpt"> <?php echo $p['uvodni_tekst'];?> </p>
   <hr>
   <div class="view_detail">
      <a href="vijest?id=<?php echo $p['link'];?>" class="blog-btn">Pročitaj više</a>
   </div>
</div>

如果你检查照片，你可以看到按钮的不在一行，因为标题更长。

我的CSS类view_detail：

.view_detail {
     text-align:  center;
     margin-bottom: 30px;
 }

我也在使用引导，所以每个建议都是受欢迎的。

Answer 1

最简单的方法：

• 将position: relative;添加到主卡容器中
• 将position: absolute; bottom: 0;添加到按钮容器中
• 为了避免按钮的重叠，将文本部件的margin-bottom设置为按钮容器的高度