用html-的--多个div--如何排序

可以使用CSS的flexbox布局或者grid布局来对多个div进行排序。

1. 使用CSS的flexbox布局

通过设置父元素的display属性为flex，可以让子元素按照一定的方式排列。可以使用justify-content属性来设置子元素在主轴上的对齐方式，使用align-items属性来设置子元素在交叉轴上的对齐方式。

例如，以下代码将四个div水平排列，并且居中对齐：

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 10px;
}
</style>

2. 使用CSS的grid布局

通过设置父元素的display属性为grid，可以将子元素布局在一个网格中。可以使用grid-template-columns属性来设置每一列的宽度，使用grid-template-rows属性来设置每一行的高度。

例如，以下代码将四个div按照2x2的方式排列：

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

<style>
.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
}
.box {
  background-color: #ccc;
}
</style>

以上是两种常用的布局方式，具体选用哪种方式取决于实际需求。