[分享]css中将3个div等分并列排序

CSS是一种用于网页布局和样式表达的语言。在网页开发中，经常需要将多个元素等分并列排序，比如将3个div等分并列排序。下面我们来看一下如何实现这个效果。 .container { display: f...

CSS是一种用于网页布局和样式表达的语言。在网页开发中，经常需要将多个元素等分并列排序，比如将3个div等分并列排序。下面我们来看一下如何实现这个效果。

<style>
  .container {
    display: flex;  /* 将容器设置为弹性布局 */
    justify-content: space-between;  /* 将容器中的元素平均分布在容器中 */
  }
  .box {
    flex-basis: calc(33.33% - 10px);  /* 将每个元素的基础宽度设置为33.33%，同时减去10px的边距 */
    height: 200px;  /* 将每个元素的高度设置为200px */
    background-color: #ccc;  /* 设置每个元素的背景颜色为灰色 */
    box-sizing: border-box;  /* 将盒模型设置为border-box */
    border: 5px solid #fff;  /* 设置每个元素的边框为5px，颜色为白色 */
  }
</style>

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div> 

在上面的代码中，我们将容器设置为弹性布局，并将元素平均分布在容器中。同时，通过设置每个元素的基础宽度为33.33%，并减去10px的边距，实现了3个元素等分的效果。最后，我们还设置了每个元素的高度、背景颜色和边框等样式。

通过以上CSS代码的设置，就可以将3个div等分并列排序，并能够适应不同的屏幕分辨率和设备类型。