css怎样让图片不重叠 |css 固定大小

.box {
position: relative;
}
.box img {
position: absolute;
top: 10px;
left: 10px;
}

将容器中的所有图片设置为绝对定位，并通过“top”和“left”属性将它们分开。这种方法将使您能够根据需要调整图像的位置。

.box {
display: flex;
flex-wrap: wrap;
}
.box img {
flex: 1 0 100%;
}

使用Flexbox是一种解决图片重叠问题的简单方法。将容器设置为flex，并在图像上使用“flex”属性可以将它们保持在同一行内并自动适应其容器的大小。

.box {
column-count: 2;
}
.box img {
width: 100%;
}

“column-count”属性可以将内容分成几列，从而可以在不使用Flexbox的情况下解决图像重叠问题。在图像上使用“width”属性可以将其调整为适当的大小。

这是一些使用CSS解决图像重叠问题的简单技巧。您可以通过这些技巧来解决图片重叠的问题，并改善您的网站的外观和感觉。