浮动 div 到包含 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>

Answer 2

绝对定位的元素是相对于它们最近的定位祖先定位的，在你的例子中是 body。然而，在 #links 上设置 position:relative 会给你带来你想要的行为：

#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>

有关职位属性的更多信息，请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/position。

Answer 3

#links {
    border: 1px solid black;
    width: 400px;
    height: 400px;
    box-shadow: 1px 1px 1 black;
    overflow: auto;
    position: relative;
}

DEMO

Answer 4

两者都将 position:relative 添加到 .des，但如果您不希望它溢出，请在 #links 上添加 height:auto 参见 codepen

浮动 div 到包含 div 的底部

Float div to bottom of containing div

html

css

css-float