如何在div的底部浮动2个div

在div的底部浮动两个div可以通过以下几种方式实现：

1. 使用CSS的flexbox布局：
   • 将父div的display属性设置为flex，使其成为一个flex容器。
   • 设置父div的flex-direction属性为column，使子元素垂直排列。
   • 将子div的margin-top属性设置为auto，使其自动填充剩余空间，从而将其推到底部。

示例代码：

<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>

1. 使用CSS的grid布局：
   • 将父div的display属性设置为grid，使其成为一个grid容器。
   • 设置父div的grid-template-rows属性为"auto 1fr"，将第一个子元素的高度设置为自适应，第二个子元素的高度设置为剩余空间。

示例代码：

<style>

.container {

 display: grid;

 grid-template-rows: auto 1fr;

 height: 300px; /* 设置父div的高度 */

}

</style>

<div class="container">

 <div>内容1</div>

 <div>内容2</div>

</div>

1. 使用绝对定位：
   • 将父div的position属性设置为relative，使其成为相对定位的容器。
   • 将第一个子div的position属性设置为absolute，并设置bottom属性为0，使其固定在底部。
   • 将第二个子div的position属性设置为absolute，并设置top属性为100%，使其相对于父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>

以上是三种常见的实现方式，根据具体需求和布局要求选择适合的方法。