html - 将 div float 到包含 div 的底部

Question

我想将 id="des" 放在包含 div 的底部。我认为使用 position:absolute 会起作用，但它会漂浮在容器之外。

#links {
  border: 1px solid black;
  width: 400px;
  height: 400px;
  box-shadow: 1px 1px 1 black;
  overflow: auto;
}
img {
  height: 100%;
  width: 100%;
}
#des {
  border: 1px solid;
  position: absolute;
  bottom: 0;
}

<div id="links">
  <a href="/">
    <img src="http://icons.iconarchive.com/icons/fasticon/social-bookmark/256/Feeds-icon.png" />
    <div id="des">FEEDS
      <br/>get latest updates here</div>
  </a>
</div>

Answer 1

只需将 position:relative 添加到 #links

查看更多关于位置 here

#links {
  border: 1px solid black;
  width: 400px;
  height: 400px;
  box-shadow: 1px 1px 1 black;
  overflow: auto;
  position: relative;
}
img {
  height: 100%;
  width: 100%;
}
#des {
  border: 1px solid;
  position: absolute;
  bottom: 0;
}

<div id="links">
  <a href="/">
    <img src="http://icons.iconarchive.com/icons/fasticon/social-bookmark/256/Feeds-icon.png" />
    <div id="des">FEEDS
      <br/>get latest updates here</div>
  </a>
</div>