[分享]css八张图片分成两行

在前端开发中，布局是至关重要的一部分。CSS作为网页的样式语言，为我们提供了丰富的布局方式。本文将介绍如何使用CSS来实现将八张图片平均分成两行的效果。/ CSS样式代码 / .container {...

在前端开发中，布局是至关重要的一部分。CSS作为网页的样式语言，为我们提供了丰富的布局方式。本文将介绍如何使用CSS来实现将八张图片平均分成两行的效果。

/* CSS样式代码 */
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.container img {
  width: calc((100% / 4) - 10px);
  margin-bottom: 20px;
} 

首先，我们需要一个容器来包裹我们的八张图片。最简单的方式是使用flex布局，将图片平均分成两行，并且使它们之间有些距离。下面是CSS代码：

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
} 

这段代码中，我们设置了.container元素的display为flex，使其具有了flex布局的特性。此外，我们设置flex-wrap属性为wrap，当到达容器的最大宽度时，图片会自动换行。我们还设置了justify-content属性为space-between，使我们的图片在容器内左右两端对齐，并且保持它们之间的距离。

接下来，我们需要设置每个图片的宽度和间距。我们可以通过CSS计算来设置每个图片的宽度和间距。下面是CSS代码：

.container img {
  width: calc((100% / 4) - 10px);
  margin-bottom: 20px;
} 

在这段代码中，我们给.container元素中的每个标签设置了宽度和底部的margin值。我们计算每个标签的宽度为容器宽度的1/4减去10px的间距，这样就可以保证每个图片在容器内平均分布。我们给底部设置了20px的margin值，这样可以保证每行图片之间有些间距。

通过以上的CSS代码，我们就可以实现将八张图片平均分成两行的效果了。