<分区>
html - 如何让元素粘在 sibling 的底部？
我创建了如下所示的元素..
我用 flexbox 做了上面的预览，像这样:
CSS
.wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.wrapper * {
width: 350px;
margin: 5px;
}
.elem1 {
background-color: pink;
height: 100px;
}
.elem2 {
background-color: teal;
height: 60px;
}
.elem3 {
background-color: yellow;
height: 80px;
}
.elem4 {
background-color: orange;
height: 120px;
}
HTML
<div class="wrapper">
<div class="elem1">
elem1
</div>
<div class="elem2">
elem2
</div>
<div class="elem4">
elem4
</div>
<div class="elem3">
elem3
</div>
</div>
有没有办法让 elem3 元素垂直 float ，这样它就会粘在 elem2 的底部？
请注意，我不能使用 col-md-xx，因为在响应模式下，这些元素的流将变为 elem1 -> elem4 -> elem2 -> elem3 而不是 elem1 -> elem2 -> elem3 ->elem4..
而且，在我的真实元素中，元素的高度不是固定的，而是取决于内容..
有什么想法吗？
最佳答案
尝试将 elem2 和 3 组合在一起。这样您就可以将您的组位置设置为相对位置并将 elem3 设置为绝对位置并将其移动到 elem2 下面。
试试这个:
.wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.wrapper * {
width: 40%;
margin: 5px;
}
.elem1 {
background-color: pink;
height: 100px;
}
.elem2 {
background-color: teal;
height: 60px;
}
.elem3 {
background-color: yellow;
height: 80px;
position: absolute;
top: 60px;
}
.elem4 {
background-color: orange;
height: 120px;
}
.grp-left, .grp-right {
width: calc(50% - 10px);
position: relative;
}
.elem1, .elem2, .elem3, .elem4 {
width: 100%;
}
@media(min-width:500px){
.grp-left, .grp-right {
width: 100%;
}
}<div class="wrapper">
<div class="grp-left">
<div class="elem1">
elem1
</div>
</div>
<div class="grp-right">
<div class="elem2">
elem2
</div>
<div class="elem3">
elem3
</div>
</div>
<div class="grp-left">
<div class="elem4">
elem4
</div>
</div>
</div>编辑 1:
为屏幕尺寸 500px 添加了 media query。
关于html - 如何让元素粘在 sibling 的底部？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57408341/