gpt4 book ai didi

javascript - 从下到上在页面中定位元素

转载 作者:行者123 更新时间:2023-11-30 16:21:14 24 4
gpt4 key购买 nike

我想从下到上显示页面的元素。就像在聊天或消息传递中一样,最后一个元素显示在底部然后其余的显示在顶部。这是一个例子:

.chart div {
font: 10px sans-serif;
background-color: steelblue;
padding: 3px;
margin: 1px;
color: white;
display: inline-block;
vertical-align: bottom;
}
  <div class="chart">
<div style="height: 10px; width: 100%; ">
10</div>
<div style="height: 15px; width: 100%; ">
15</div>
<div style="height: 20px; width: 100%; ">
20</div>
<div style="height: 25px; width: 100%; ">
25</div>
<div style="height: 30px; width: 100%; ">
30</div>
</div>

我想要的是,它会从下到上显示 10 到 30 个与 CSS 相关的内容。

提前谢谢你。

最佳答案

使用 CSS flexbox 可以很容易地实现这一点。您可能需要添加一些 vendor 前缀,但必须通过将这两行代码添加到父级 .chart(您还需要将 width: 100% 添加到 children )

CSS:

.chart  { 
display: flex;
flex-wrap:wrap-reverse;
}
.chart div {
width: 100%;
}

这将使元素反向显示。这是一个工作 fiddle :https://jsfiddle.net/vxtqfqw9/5/

如果您想进一步了解 flexbox 的强大功能以及如何利用它,我写了一篇文章,其中包含 2 个非常有用的资源。 :)

http://www.joshuasanger.ca/so-long-floats/

关于javascript - 从下到上在页面中定位元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34702218/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com