css层的一行4列

CSS层的一行4列是一种常用的网页布局方式。它可以让网页看起来简洁美观，同时也方便用户浏览信息。下面是一组CSS代码实现一行4列的布局：

/* 设置容器的样式 */
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* 设置列的样式 */
.col {
  flex-basis: calc(25% - 10px);
  margin-bottom: 20px;
}

/* 设置列内内容的样式 */
.col p {
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  padding: 10px;
  background-color: #eee;
  border-radius: 5px;
}

以上代码中，通过设置容器的 display 属性为 flex，使它成为一个弹性容器。同时，flex-wrap 属性被设置为 wrap，以确保列在父容器的宽度超过一行时自动换行。

为了让列之间有一定的间距，我们使用了 justify-content 属性，并将其设置为 space-between。这样一来，每一列都会在容器中自动分布至两侧，列与列之间的间距也就随之产生了。

接下来，我们通过为每一列设置 flex-basis 属性和 margin 属性，使得每一列的宽度为父容器的四分之一，上下之间有20像素的间距。最后，为了让每一列中的内容看起来更加美观，我们通过设置每个 p 标签的样式，来使其具有适当的颜色、边距等效果。