如何使div从下到上放置
[英]How to make a div placed from bottom to top
问题描述
how to make the div placed from bottom to top and not from top to bottom.
如何使 div 从下到上而不是从上到下放置。 For example this code places div from top to bottom例如此代码将 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>
但是如何使 div 像这张图片一样从下到上定位
4 个解决方案
解决方案1
4 已采纳 2021-05-16 00:34:51
You can try to use flexbox .您可以尝试使用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>
If your HTML elements were in reverse order such as 1-4 and not 4-1 you could still achieve the same effect by changing the below properties like so:如果您的HTML元素的顺序相反，例如 1-4 而不是 4-1，您仍然可以通过更改以下属性来实现相同的效果，如下所示：
justify-content: flex-start;
flex-direction: column-reverse;
解决方案2
1 2021-05-16 00:54:19
<!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代码笔： https://codepen.io/Centaur26/pen/vYxKxMw
Make sure, display as flex,flex direction column reverse and justify-content flex-end.确保显示为 flex、flex 方向列反向和 justify-content flex-end。
解决方案3
1 2021-05-16 00:58:01
Add the following to your.message class
将以下内容添加到 your.message class
height: auto;
position: absolute;
bottom: 0px;
解决方案4
1 2021-05-16 01:02:30
Try setting display to table-cell and vertical-align to bottom , which provides more support across browsers than flexbox .尝试将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.