Question

我正在尝试将content-desc div放在content-box-inner的底部，但它没有放在那里，它只是在图像之后：

＆＃13;

.content-box-inner {
  position: relative;
  display: inline-block;
  width: 360px;
  height: 460px;
  background-color: #fff;
  margin-right: 10px;
  border: 1px solid #ddd;
  overflow: hidden;
}
.content-box-inner > img {
  width: 200px;
  margin-top: 10px;
  border: 1px solid #ddd;
  padding: 8px;
}
.content-title {
  position: relative;
  height: 35px;
  background-color: #FFB400;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3)
}
.content-title > p {
  text-align: center;
  line-height: 35px;
  font-family: verdana;
  color: #222;
  font-weight: bold;
  letter-spacing: 0.02em;
  text-transform: capitalize;
}
.content-desc {
  position: relative;
  height: 50px;
  bottom: 0;
  left: 0;
  right: 0;
}
.content-desc > p {
  font-family: verdana;
  letter-spacing: 0.04em;
  font-size: 15px;
  padding: 8px;
}

＆＃13;

<div class="content-box-inner">
  <div class="content-title">
    <p>text</p>
  </div>
  <img src="img.jpg">
  <div class="content-desc">
    <p>some text</p>
  </div>
</div>

＆＃13;

有谁知道，我在CSS中做错了什么？

Answer 1

您是否尝试过使用param？添加position: absolute;可以解决您的问题。

Answer 2

更改

.content-desc {
position: relative;
...
}

到

.content-desc {
position: absolute;
...
}

Answer 3

您希望将.content-desc设置为绝对定位：

.content-box-inner {
position: relative;
display: inline-block;
width: 360px;
height: 460px;
background-color: #fff;
margin-right: 10px;
border: 1px solid #ddd;
overflow: hidden;
}

.content-box-inner > img {
width: 200px;
margin-top: 10px;
border: 1px solid #ddd;
padding: 8px;
}

.content-title {
position: relative;
height: 35px;
background-color: #FFB400;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3)
}

.content-title > p {
text-align: center;
line-height: 35px;
font-family: verdana;
color: #222;
font-weight: bold;
letter-spacing: 0.02em;
text-transform: capitalize;
}

.content-desc {
position: absolute;
height: 50px;
bottom: 0;
left: 0;
right: 0;
}

.content-desc > p {
font-family: verdana;
letter-spacing: 0.04em;
font-size: 15px;
padding: 8px;
}

请参阅此处的链接：https://jsfiddle.net/john_h/w05hwuxp/

将div放在底部

3 个答案: