CSS控制让每行显示4个图片的样式

沃梦达教程前端开发

2024-03-09 11

下面是CSS控制让每行显示4个图片的完整攻略：

下面是CSS控制让每行显示4个图片的完整攻略：

方法一：使用CSS Grid

CSS Grid是一个强大的布局工具，可以轻松地将元素划分成列和行。使用CSS Grid可以轻松实现“让每行显示4个图片的效果”。

在父容器设置display: grid;属性，将该元素划分成4列。示例代码如下：

.parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

在子容器设置宽度和高度的百分比，并保证图片不变形。示例代码如下：

.child {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  position: relative;
}
.child img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

方法二：使用CSS Flexbox

CSS Flexbox也是一种流行的布局工具，可以轻松地实现“让每行显示4个图片的效果”。

在父容器中设置display: flex;属性，将该元素内的元素以行或列的形式排列。示例代码如下：

.parent {
  display: flex;
  flex-wrap: wrap;
}

在子容器中设置宽度和高度的百分比，并保证图片不变形。示例代码如下：

.child {
  width: 25%;
  height: 0;
  padding-bottom: 25%;
  position: relative;
}
.child img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}