时间戳

首页 > 解决方案 > 按钮固定位置

html - 按钮固定位置

问题描述

我正在尝试使用固定按钮，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;
 }

我也在使用引导程序，所以欢迎每一个建议。

标签： htmlcsstwitter-bootstrap

解决方案

最简单的方法：

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

推荐阅读