css图片水平排列错位 |手机版css hover功能

/* CSS代码 */
.img-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.img-item {
margin: 10px;
width: 30%;
}

上面CSS代码的主要作用是排列图片。大家用flex布局将图片容器中的图片水平排列，设置容器中元素的纵向排列居中，并且通过设置margin和宽度调整不同图片之间的距离和大小。

然而，假设大家在图片容器中放入的不是宽高比相同的正方形图形，而是宽高比不同的图片，那么图片之间的错位问题就会浮现出来。

/* CSS代码 */
.img-item {
margin: 10px;
width: 30%;
overflow: hidden;
}
.img-item img {
width: 100%;
height: auto;
}

此时，大家需要对CSS代码做出调整。为了避免图片错位，大家可以对图片进行溢出设置，将其隐藏掉。对于图片的宽高比不同的情况，大家将img标签的宽度固定为100%以适应不同宽高比的图片，同时设置高度自适应，这样图片就不会因宽高比不一而错位了。

总之，要避免图片水平排列错位，大家需要仔细审视CSS代码并根据实际情况进行调整，特别是在面对宽高比不同的图片时。