Question

我正在尝试使用margin-bottom修复按钮，但是如果标题更长，则无法使用。

我的示例：photo

<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设置为按钮容器的高度

按钮的固定位置

1 个答案: