这是我的第一个问题，所以我希望它符合标准。我正在尝试将我的子 div 移动到父 div 的底部。我读到父 div 的定位必须设置为 relative 并且子 div 的定位必须设置为 绝对。然后，bottom 必须设置为 0，子 div 才能向下移动。
<html>
<style type="text/css">
.card {
position:relative;
/* Don’t change these */
float: left;
box-sizing: border-box;
/* Feel free to play around with these */
text-align: center;
border-style: double;
border-width: 3px;
background: #84a0d7;
line-height: 100px;
height: 100px;
/* Change the width to get a different layout */
width: 33.33%;
}
.comment {
font-size:9pt;
color:white;
font-family:Verdana;
line-height:normal;
position:absolute;
/* Here, I set top to 0. If I change that line to bottom:0;
the Div moves up instead of down. Could someone help me
figure out why that happens? */
top:0;
text-align:left;
width: 100%;
height:100px;
}
@media (max-width:800px) {
.card {
width:50%;
}
}
@media (max-width:400px) {
.card {
width:100%;
}
}
</style>
<head>
<meta charset="UTF-8">
</head>
<body style="margin:0px">
<h1>Best Football Players</h1>
<div class="card">
Messi
<div class="comment">Undoubtedly the best in the world and most likely of all times (Sorry, Ronaldo fans)</div>
</div>
</body>
</html>
最佳答案
现在你有了 comment设置为与 card 相同的高度, 所以设置 top 并不重要或 bottom到 0。
更改 .comment像这样，它将在底部对齐。
bottom:0;
height: auto;
示例片段
.card {
position: relative;
/* Don’t change these */
float: left;
box-sizing: border-box;
/* Feel free to play around with these */
text-align: center;
border-style: double;
border-width: 3px;
background: #84a0d7;
line-height: 100px;
height: 100px;
/* Change the width to get a different layout */
width: 33.33%;
}
.comment {
font-size:9pt;
color:white;
font-family:Verdana;
line-height:normal;
position:absolute;
bottom:0;
text-align:left;
width: 100%;
height: auto;
}
@media (max-width:800px) {
.card {
width:50%;
}
}
@media (max-width:400px) {
.card {
width:100%;
}
} <h1>Best Football Players</h1>
<div class="card">
Messi
<div class="comment">Undoubtedly the best in the world and most likely of all times (Sorry, Ronaldo fans)</div>
</div>关于CSS - 父 Div(相对)中的子 Div(绝对)不移动到底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35924628/