朋友们，我有一个div，它在我的标题中有文本，但我想推送这个div，使它位于标题窗口的底部。什么是最好的方法，提前非常感谢。到目前为止，它看起来是这样的：
#head {
border: solid black 1px;
text-align: center;
background-image: url("../images/interior1.jpg");
background-size: cover;
background-repeat: no-repeat;
color: #f8f6f0;
height: 50vh;
}<body>
<header id="head">
<div id="text">
<h1>Nagoya Express</h1>
<p>
<h2>Your Way to More Ecofriendly and Economical Personal Trasportation</h2>
</p>
</div>
</header>
</body>好吧，你有两个最好的选择：
-
为#head添加position:relative，为#text添加position:absolute。接下来你需要设置底部：0；用于#text。
-
第二个选项是使用display:flex作为#head，并设置对齐项目：flex结束。
下面的示例中介绍了两种解决方案：
.head {
height: 500px;
border: 1px solid red;
}
.text {
background: green;
}
.head--position {
position: relative;
}
.head--position .text {
position: absolute;
bottom: 0;
}
.head--flex {
display: flex;
align-items: flex-end;
}<body>
<header class="head head--position">
<div class="text">
<h1>Nagoya Express</h1>
<p>Your Way to More Ecofriendly and Economical Personal Trasportation</p>
</div>
</header>
<header class="head head--flex">
<div class="text">
<h1>Nagoya Express</h1>
<p>Your Way to More Ecofriendly and Economical Personal Trasportation</p>
</div>
</header>
</body>注意以下事实是很好的：选择器应该由类而不是id设置样式。