css如何设置排列的个数

在使用CSS时，经常需要对排列进行设置。其中一个关键的参数是指定每行排列的个数。下面我们一起来看看如何设置排列个数。

/* 设置每行排列个数为3 */
.container{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;/*让每个排列之间有空隙*/
}

/* 设置每行排列个数为4 */
.container{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  grid-gap: 10px;/*让每个排列之间有空隙*/
}

/* 设置每行排列个数为5 */
.container{
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* 设置每行排列个数为6 */
.container{
  display: inline-block;
  width: 80%; /*自适应的容器宽度*/
  text-align: justify; /*每个排列之间的距离相等*/
  font-size: 0; /*消除换行符的空白*/
}

/* 设置每行排列个数为7 */
.container{
  display: table;
  width: 100%; /*自适应的容器宽度*/
  table-layout: fixed; /*每个排列的宽度相等*/
}

/* 设置每行排列个数为8 */
.container{
  column-count: 3;
  column-gap: 10px;/*让每个排列之间有空隙*/
}

/* 设置每行排列个数为9 */
.container{
  float:left;/*每个排列浮动*/
  width: 30.33%; /*每行中有三个项目，所以每个项目的宽度是30.33%*/
  margin-right: 2%;/*每个排列之间有空隙*/
  margin-bottom: 4%;/*让每两行之间有空隙*/
}

css如何设置排列的个数

通过以上代码示例，我们可以看到常用的七种设置排列个数的方法。根据不同的实际应用场景，可以选择适合自己的方式。希望大家能够在实践中掌握更多的CSS技巧。

css如何设置排列的个数

相关文章