如何将一个 div 从底部向上放置

Question

如何将一个 div 从底部向上放置

3

如何使div从底部到顶部而不是从顶部到底部。例如，此代码将div从顶部到底部放置。

<!DOCTYPE html>

<body>
  <div class="message">
    <div class="message__block">4</div>
    <div class="message__block">3</div>
    <div class="message__block">2</div>
    <div class="message__block">1</div>
  </div>
</body>
</div>

<style>
  .message {
    width: 100vmin;
    height: 100vmin;
    overflow: hidden;
    background: green;
  }

  .message__block {
    color: white;
    width: 100%;
    height: 9vmin;
    background: black;
    margin-bottom: 1.1vmin;
  }
</style>

</body>

</html>

But how to make the divs are located from bottom to top as in this picture

- Gorilka

4个回答

1

<!DOCTYPE html>

<body>
  <div class="message">
    <div class="message__block">4</div>
    <div class="message__block">3</div>
    <div class="message__block">2</div>
    <div class="message__block">1</div>
  </div>
</body>
</div>

<style>
  .message {
    width: 100vmin;
    height: 100vmin;
    overflow: hidden;
    background: green;
    display:flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
  }

  .message__block {
    color: white;
    width: 100%;
    height: 9vmin;
    background: black;
    margin-bottom: 1.1vmin;
  }
</style>

</body>

</html>

CodePen: https://codepen.io/Centaur26/pen/vYxKxMw

请确保将显示设置为flex，flex方向为列反转，并将对齐方式设置为flex-end。

- Ash Sharma

1

将以下内容添加到您的.message类中

height: auto;
position: absolute;
bottom: 0px;

- Yannick Y

1

尝试将display设置为table-cell，并将vertical-align设置为bottom，这比flexbox提供了更好的跨浏览器支持。

.message {
  width: 100vmin;
  height: 100vmin;
  overflow: hidden;
  background: green;
  display: table-cell;
  vertical-align: bottom;
}

.message__block {
  color: white;
  width: 100%;
  height: 9vmin;
  background: black;
  margin-bottom: 1.1vmin;
}

<!DOCTYPE html>
<html>
<body>
  <div class="message">
    <div class="message__block">4</div>
    <div class="message__block">3</div>
    <div class="message__block">2</div>
    <div class="message__block">1</div>
  </div>
</body>
</html>

- Spectric

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jakub A Suplicki · Accepted Answer

你可以尝试使用Flexbox。

  .message {
    width: 100vmin;
    height: 100vmin;
    overflow: hidden;
    background: green;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    align-items: center;
  }

  .message__block {
    color: white;
    width: 100%;
    height: 9vmin;
    background: black;
    margin-bottom: 1.1vmin;
    text-align: center;
  }

<body>
  <div class="message">
    <div class="message__block">4</div>
    <div class="message__block">3</div>
    <div class="message__block">2</div>
    <div class="message__block">1</div>
  </div>
</body>

如果您的HTML元素顺序是倒序的，例如1-4而不是4-1，您仍然可以通过更改以下属性来达到相同的效果：

justify-content: flex-start;
flex-direction: column-reverse;