css中水平分布怎么写

CSS中水平分布通常是在容器中，将一组元素水平等间距地排列。以下是一些常用的方法:

/*方法1：使用 Flexbox*/
.container {
  display: flex;
  justify-content: space-between; /*将子元素分布到容器的两端*/
}

/*方法2：使用 Grid*/
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /*设置自适应列数，每列最小100px*/
  grid-gap: 10px; /*设置网格间距*/
}

/*方法3：使用浮动*/
.container {
  overflow: hidden;
  width: 100%;
}
.item {
  float: left; /*子元素向左浮动*/
  width: 33.33%; /*子元素宽度为容器的三分之一*/
}

/*方法4：使用伪元素*/
.container::before, .container::after {
  content: ""; /*生成空的伪元素*/
  display: table; /*将伪元素转变为块级元素*/
}
.container::after {
  clear: both; /*清除浮动*/
}
.item {
  float: left;
  width: 33.33%;
} 

实际使用中，可根据具体情况选择不同的方法，并且可以结合CSS动画、响应式布局等功能实现更加丰富的效果。