在div的底部浮动两个div可以通过以下几种方式实现:
示例代码:
<style>
.container {
display: flex;
flex-direction: column;
height: 300px; /* 设置父div的高度 */
}
.child {
margin-top: auto;
}
</style>
<div class="container">
<div>内容1</div>
<div class="child">内容2</div>
</div>
示例代码:
<style>
.container {
display: grid;
grid-template-rows: auto 1fr;
height: 300px; /* 设置父div的高度 */
}
</style>
<div class="container">
<div>内容1</div>
<div>内容2</div>
</div>
示例代码:
<style>
.container {
position: relative;
height: 300px; /* 设置父div的高度 */
}
.child1 {
position: absolute;
bottom: 0;
}
.child2 {
position: absolute;
top: 100%;
}
</style>
<div class="container">
<div class="child1">内容1</div>
<div class="child2">内容2</div>
</div>
以上是三种常见的实现方式,根据具体需求和布局要求选择适合的方法。
领取专属 10元无门槛券
手把手带您无忧上云