Question

我的目的是将div容器放在div容器中，但它不能正常工作。我应该放在底部的div容器贴在整个页面的底部。

＆＃13;

.info-container {
  display: flex;
  margin: 0 0 0 auto;
  max-width: 450px;
  max-height: 400px;
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 38px 0px rgba(0, 0, 0, 0.36);
  background-color: yellow;
}

div.info-header {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 470px;
  background: url('../img/infoheader.png') no-repeat;
  background-position: auto auto;
  height: 100px;
  box-sizing: border-box;
}

div.info-header h3 {
  font-family: 'SignPanter', sans-serif !important;
  text-decoration: none;
  font-size: 32px;
  color: white;
  font-weight: 200;
  text-shadow: 1px 1px #747474;
  text-align: center;
}

div.info-bottom-text:hover {
  color: white;
  text-shadow: 1px 1px #747474;
}

.info-bottom {
  display: flex;
  align-items: flex-end;
  position: absolute;
  bottom: 0px;
}

＆＃13;

<div class="info-container">
  <div class="info-header">
    <div class="info-header-text">
      <h3>Los Santos International Airport</h3>
    </div>
  </div>
  <div class="info-bottom">
    ss
    <div class="info-bottom-text">
      sss
    </div>
  </div>
</div>

＆＃13;

div的页眉和页脚之间应该是一个尚未实现的内容div。

如果有人可以帮助我处理我的问题会很好！提前谢谢。

Answer 1

将外部div设置为stlye

position: relative;

将内部div设置样式设为

  position: absolute;
    bottom: 0;

Answer 2

诀窍是将所有内容包装在一个相对定位的元素中，该元素是外部.info-container的直接子元素。

这可以在下面看到，我在其中使用简单规则info-wrapper创建了课程position: relative。

.info-container {
  display: flex;
  margin: 0 0 0 auto;
  max-width: 450px;
  max-height: 400px;
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 38px 0px rgba(0, 0, 0, 0.36);
  background-color: yellow;
}

div.info-header {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 470px;
  background: url('../img/infoheader.png') no-repeat;
  background-position: auto auto;
  height: 100px;
  box-sizing: border-box;
}

div.info-header h3 {
  font-family: 'SignPanter', sans-serif !important;
  text-decoration: none;
  font-size: 32px;
  color: white;
  font-weight: 200;
  text-shadow: 1px 1px #747474;
  text-align: center;
}

div.info-bottom-text:hover {
  color: white;
  text-shadow: 1px 1px #747474;
}

.info-bottom {
  display: flex;
  align-items: flex-end;
  position: absolute;
  bottom: 0px;
}

.info-wrapper {
  position: relative;
}

<div class="info-container">
  <div class="info-wrapper">
    <div class="info-header">
      <div class="info-header-text">
        <h3>Los Santos International Airport</h3>
      </div>
    </div>
    <div class="info-bottom">
      ss
      <div class="info-bottom-text">
        sss
      </div>
    </div>
  </div>
</div>

Answer 3

info-container应该有position: relative

.info-container {
  position: relative;
  display: flex;
  margin: 0 0 0 auto;
  max-width: 450px;
  max-height: 400px;
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 38px 0px rgba(0, 0, 0, 0.36);
  background-color: yellow;
}

div.info-header {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 470px;
  background: url('../img/infoheader.png') no-repeat;
  background-position: auto auto;
  height: 100px;
  box-sizing: border-box;
}

div.info-header h3 {
  font-family: 'SignPanter', sans-serif !important;
  text-decoration: none;
  font-size: 32px;
  color: white;
  font-weight: 200;
  text-shadow: 1px 1px #747474;
  text-align: center;
}

div.info-bottom-text:hover {
  color: white;
  text-shadow: 1px 1px #747474;
}

.info-bottom {
  display: flex;
  align-items: flex-end;
  position: absolute;
  bottom: 0px;
}

CSS：在div容器的底部放置一个div容器

3 个答案: