css3 横向显示图片

CSS3是CSS的最新版本，它引入了许多新特性，使得我们可以实现一些以往很难实现的效果。比如，我们可以很容易地实现横向显示图片。

.gallery {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
}
.gallery img {
    flex-shrink: 0;
    width: 300px;
    height: auto;
    margin-right: 20px;
}
    

在上面的代码中，我们首先定义了一个名为gallery的容器，使用了flex布局，并设置了flex-wrap属性为nowrap，这样可以让所有图片都在同一行显示。同时，我们还使用了overflow-x属性来设置水平滚动条。

接着，我们对图片进行了样式设置，使用了flex-shrink属性来保证图片不会缩小。同时，我们还设置了图片的宽度为300px，并使用了margin-right属性来设置图片之间的间隔。

使用以上代码，我们就可以很容易地实现横向显示图片的效果了。当然，如果需要增加图片数量，只需要在gallery容器中添加更多的img标签即可。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！