关于CSS九宫格展示图片写法

最新推荐文章于 2024-07-25 10:55:37 发布

imsopoor

最新推荐文章于 2024-07-25 10:55:37 发布

阅读量183

点赞数

分类专栏：前端文章标签： css css3 html

本文链接：https://blog.csdn.net/imsopoor/article/details/125320557

版权

前端专栏收录该内容

39 篇文章 0 订阅

订阅专栏

在HTML和CSS中，当尝试使用Flex布局让图片在容器两侧等比例展示时，可能会遇到样式调整的困难。本文通过分析提供的代码片段，探讨了如何解决因负margin和padding导致的布局问题，确保图片在不同屏幕尺寸下都能保持合适的间距和比例。

摘要由CSDN通过智能技术生成

需求
在这里插入图片描述
图片贴其俩边，用直接用flex布局中属性不好搞
Html

<view class="imgs">
    <view class="img" v-for="(url, index) in imgArrData" :key="index">
      <image :src="url" mode="aspectFill" class="img-elel" />
    </view>
  </view>

CSS

.imgs {
  display: flex;
  flex-wrap: wrap;
  margin: -10rpx;
}

.img {
  flex: none;
  width: 33.33%;
  padding: 10rpx;

  .img-elel {
    width: 100%;
    height: 100%;

  }
}