[英]How to make a div placed from bottom to top
如何使 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>
您可以尝试使用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;
<!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>
代码笔: https://codepen.io/Centaur26/pen/vYxKxMw
确保显示为 flex、flex 方向列反向和 justify-content flex-end。
尝试将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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.