使用CSS将标题移动到底部

Question

如何在不改变html文件结构的情况下将标题移动到最大宽度为640px的屏幕底部？

＆＃13;

＆＃13;

#header-image {
  width: 100%;
  position: relative;
}

.header-title {
  color: #000000;
  font-size: 3em;
  font-weight: 700;
  position: absolute;
  top: 25%;
  width: 255px;
  right: 50px;
  text-align: left
}

.bottom-bar {
  display: block;
  height: 25px;
  width: 100%;
  background- color: #007cb0;
}

.screen-480 {
  display: none;
}

.screen-768 {
  display: block;
}

@media only screen and (max-width: 480) {
  .screen-480 {
    display: block;
  }
  .screen-768 {
    display: none;
  }
}

＆＃13;

<div id="header-image">
  <div class="image">
    <div class="header-title">The quick brown fox jumped over the lazy dog</div>
    <img src="http://via.placeholder.com/480x683.png" width="100%" class="screen-
    480" alt="img" />
    <img src="http://via.placeholder.com/1028x550.png" width="100%" class="screen-
    768" alt="img" />
  </div>
  <div class="bottom-bar"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

不是使用top:25%，而是将其设为底部，并将您想要的距离从底部放入多少。我还改变了代码，使其在底部居中，如果这是你想要的。

＆＃13;

＆＃13;

#header-image {
  width: 100%;
  position: relative;
}

.header-title {
  color: #000000;
  font-size: 3em;
  font-weight: 700;
  position: absolute;
  bottom: 10%;
  width: 255px;
  margin:auto;
  display:block;
}

.bottom-bar {
  display: block;
  height: 25px;
  width: 100%;
  background-color: #007cb0;
}

.screen-480 {
  display: none;
}

.screen-768 {
  display: block;
}

@media only screen and (max-width: 480) {
  .screen-480 {
    display: block;
  }
  .screen-768 {
    display: none;
  }
}

＆＃13;

<div id="header-image">
  <div class="image">
    <div class="header-title">The quick brown fox jumped over the lazy dog</div>
    <img src="http://via.placeholder.com/480x683.png" width="100%" class="screen-
    480" alt="img" />
    <img src="http://via.placeholder.com/1028x550.png" width="100%" class="screen-
    768" alt="img" />
  </div>
  <div class="bottom-bar"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

@media only screen and (max-width: 640px) {
    .header-title{
      bottom:0;
      top:initial;
    }
}

Answer 3

要将某些内容与bottom对齐，可以将position设置为absolute，将bottom设置为0px.这会将其与{{1}对齐绝对或相对的第一个父级。

bottom

#header-image {
  width: 100%;
  position: relative;
}

.header-title {
  color: #000000;
  font-size: 3em;
  font-weight: 700;
  
   position:absolute;
   bottom:0;
  width: 255px;
  right: 50px;
  text-align: left
}

.bottom-bar {
  display: block;
  height: 25px;
  width: 100%;
  background- color: #007cb0;
}

.screen-480 {
  display: none;
}

.screen-768 {
  display: block;
}

@media only screen and (max-width: 480) {
  .screen-480 {
    display: block;
  }
  .screen-768 {
    display: none;
  }
}