浮动文本到其容器的末尾

Posted 2021-05-07

我在将“查看全部”锚点移到容器div的底部时遇到困难。基本上，有DIV会根据javascript更改其高度。调整高度后，“查看全部”按钮似乎挂在中间。如何解决？https://policies.anu.edu.au/ppl/search_results/index.htm?searchtype=QUICK&ssUserFullText=risk请参阅“政策”和“程序”部分下的全部查看]

答案

有几种方法，我更喜欢使用position: absolute;：

CSS

// for demonstration
flex-box {
  display: flex;
}

.box-solid {
  // for demonstration
  height: 50vh;
  padding: 1em;
  border: 1px solid #ccc;
  margin: 1em;
  width: 20%;

  // you need this
  position: relative;
}

.view-all {
  // you need this
  position: absolute;
  bottom: 1em;
  right: 1em;
}

稍微改变一下html ...

<flex-box> // this element is for demonstration
  <div class="box-solid">
    Some text
    <a href="" class="view-all">view all</a>
  </div>
  <div class="box-solid">
    Some text
    <a href="" class="view-all">view all</a>
  </div>
</flex-box>

我从<p>周围删除了<a>，并添加了一个类（“全部查看”）。

另一答案

您只需进行几处CSS更改即可完成此操作。将父级“ div”位置设置为“ relative”。然后将“ P”的位置更改为absolute并设置右下角的值。

<div class="box-solid row1" style="min-height: 218px;height: 935px;position: relative;">
<ul style="padding:0px; margin:10px;"> </ul>

<p align="right" class="viewall_results" style="
  position: absolute;
  right: 10px;
  bottom: 10px;
    <a href=""> View all</a>
</p>