将 div 放在 div 的底部

Question

我有一个带有包含图像的边距的 div。 我想在该 div 中放置另一个 div 并将其定位到父 div 的底部（甚至到边缘）。 但是我无法做到这一点。

 .headermario { background-image: url("resources/banner.png"); background-size: 600px; background-repeat: no-repeat; background-position: bottom; background-color: red; height: 200px; width: 90%; margin-bottom: 100px; border-style: solid; border-width: 10px; } .topnav { overflow: hidden; display: flex; justify-content: center; } .topnav a { float: left; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .topnav a:hover { background-color: #ddd; color: black; }

 <div class="marioHeader"> <h1 class="title">Super Mario</h1> <div class="headermario"> <div class="topnav"> <a href="#home">About</a> <a href="#news">History</a> </div> </div> </div>

它看起来像这样： 但我希望它看起来像这样：

Answer 1

CSS 解决方案如下：

 .headermario {
  background-image: url("resources/banner.png");
  background-size: 600px;
  background-repeat: no-repeat;
  background-position: bottom;
  background-color: red;
  height: 200px;
  width: 90%;
  position: relative;
  margin-bottom: 100px;
  border-style: solid;
  border-width: 10px;
}

.topnav {
  overflow: hidden;
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: -40px;
}

否则，您也可以将 .topnav 放在 .marioHeader 中（将其从 .headermario 类中拉出）并在那里进行调整。 但要写这个，我需要 .marioHeader 类的样式信息

Answer 2

我能想到的最简单的方法是使用 flex

   .headermario {
    background-image: url("resources/banner.png");
    background-size: 600px;
    background-repeat: no-repeat;
    background-position: bottom;
    background-color: red;
    height: 200px;
    width: 90%;
    margin-bottom: 100px;
    border-style: solid;
    border-width: 10px;
    display: flex;
    flex-direction: column-reverse
}