如何使div從下到上放置
[英]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>
4 個解決方案
解決方案1
4 已采納 2021-05-16 00:34:51
您可以嘗試使用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;
解決方案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>
代碼筆： https://codepen.io/Centaur26/pen/vYxKxMw
確保顯示為 flex、flex 方向列反向和 justify-content flex-end。
解決方案3
1 2021-05-16 00:58:01
將以下內容添加到 your.message class
height: auto;
position: absolute;
bottom: 0px;
解決方案4
1 2021-05-16 01:02:30
嘗試將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>
如何制作一個從上到下連接到頁面的垂直div容器？
[英]How to make a vertical div container connected from top to bottom to the page?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.