[分享]css两个div并排占满

网页开发中，经常需要将两个 div 并排显示，并占满整个容器的宽度。这种排版方式非常常见，可以用于横向导航条、产品展示等多种场景。在这篇文章中，我们将介绍几种常见的实现方法。第一种方法是使用 floa...

网页开发中，经常需要将两个 div 并排显示，并占满整个容器的宽度。这种排版方式非常常见，可以用于横向导航条、产品展示等多种场景。在这篇文章中，我们将介绍几种常见的实现方法。

第一种方法是使用 float 属性。我们可以将两个 div 都设置为 float: left，然后在父容器中添加 overflow: hidden 或 clearfix（清除浮动），即可实现两个 div 并排占满的效果。示例代码如下：

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

<style>
.container {
  overflow: hidden; /* 或 .container::after {content: ""; display: block; clear: both;} */
}
.box1, .box2 {
  float: left;
  width: 50%; /* 两个 div 各占 50% 宽度 */
  height: 100px; /* 定义高度，方便查看效果 */
}
</style> 

第二种方法是使用 display: flex 属性。在父容器中设置 display: flex，并且为子元素设置 flex: 1，即可实现两个 div 并排占满的效果。示例代码如下：

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

<style>
.container {
  display: flex;
}
.box1, .box2 {
  flex: 1;
  height: 100px; /* 定义高度，方便查看效果 */
}
</style> 

综上所述，使用 float 和 display: flex 是实现两个 div 并排占满容器宽度的两种常见方法。开发者可以根据具体业务需求选择合适的方法。