css怎么让三个div并排

一、使用float属性实现三个div并排

使用float属性可以让三个div实现水平排列，float的默认属性值是left，在左侧对齐。可以通过设置不同的float属性值来达到不同对齐方式的效果。

<style>
  .box {
    float: left;
    width: 30%;
    margin-right: 5%;
    height: 200px;
    background-color: #f0f0f0;
  }
  .box:last-child{
    margin-right: 0;
  }
</style>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

二、使用flex布局实现三个div并排

使用flex布局可以更方便地进行多列布局。设置容器display为flex，将子元素设置为flex-item，再利用flex属性实现对齐方式，比如justify-content实现水平居中。

<style>
  .container{
    display: flex;
    justify-content: space-between;  /* 子元素均匀分布在容器中 */
  }
  .box{
    width: 30%;
    height: 200px;
    background-color: #f0f0f0;
  }
</style>
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

三、使用grid布局实现三个div并排

使用grid布局也可以实现多列布局。使用grid-template-columns属性可以设置容器的列数和每列的宽度，然后将子元素放入对应的单元格中。

<style>
  .container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;  /* 列数及每列宽度 */
    grid-gap: 10px;  /* 单元格之间的间距 */
  }
  .box{
    height: 200px;
    background-color: #f0f0f0;
  }
</style>
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

四、使用inline-block实现三个div并排

使用inline-block属性可以让三个div水平排列。设置每个div的display属性为inline-block，再将父元素的字体大小设置为0，可以去除div之间的空白间隔。

<style>
  .container{
    font-size: 0;
  }
  .box{
    display: inline-block;
    width: 30%;
    height: 200px;
    background-color: #f0f0f0;
  }
</style>
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>