gpt4 book ai didi

javascript - 如何从下到上对齐 HTML 元素?

转载 作者:行者123 更新时间:2023-11-28 01:14:03 25 4
gpt4 key购买 nike

如何在 HTML 中实现元素从下到上对齐的布局?

基本的 HTML 结构:

<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>

期望的结果:

css layout from bottom to top

寻找 CSS 或 JavaScript 解决方案。

最佳答案

您可以使用 Flexbox 使用纯 CSS 来做到这一点。关键属性是 flex-wrap,可以将其设置为 wrap-reverse 以获得所需的布局。

演示:

.container {
display: flex;
flex-direction: row;
flex-wrap: wrap-reverse;
align-content: flex-start;
/* demo */
width: 40%;
min-height: 400px;
border: 3px solid #000;
text-align: center;
margin: 0 auto;
}

.container div {
height: 100px;
width: 50%;
border: 1px dashed #000;
box-sizing: border-box;
padding: 1em;
}
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>

jsFiddle:https://jsfiddle.net/v4z38apL/1/

P.S 当然,您需要考虑浏览器支持和 vendor 前缀。

关于javascript - 如何从下到上对齐 HTML 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36485628/

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