uniapp使用多列布局显示图片,一行两列

完整代码:

<script setup>
	const src = "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg"
</script>

<template>
	<view class="content">
		<view class="img-list">
			<image :src="src" />
			<image :src="src" />
			<image :src="src" />
			<image :src="src" />
			<image :src="src" />
			<image :src="src" />
			<image :src="src" />
		</view>
	</view>
</template>



<style scoped>
	.content {
		margin: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.img-list {
		padding: 10rpx;
		column-count: 2;
		column-gap: 10rpx;
	}
</style>

渲染效果:
在这里插入图片描述

相关推荐

  1. 使用 CSS 实现布局

    2024-07-13 16:30:03       21 阅读
  2. css3布局

    2024-07-13 16:30:03       42 阅读
  3. 如何用css实现布局?

    2024-07-13 16:30:03       32 阅读
  4. CSS3(详解网页布局应用)

    2024-07-13 16:30:03       29 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-13 16:30:03       66 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-13 16:30:03       70 阅读
  3. 在Django里面运行非项目文件

    2024-07-13 16:30:03       57 阅读
  4. Python语言-面向对象

    2024-07-13 16:30:03       68 阅读

热门阅读

  1. 常用排序算法汇总

    2024-07-13 16:30:03       20 阅读
  2. 前后端项目部署方案汇总

    2024-07-13 16:30:03       22 阅读
  3. Python基础总结之字典元素的删除方法详解

    2024-07-13 16:30:03       23 阅读
  4. 搭建安全扩展

    2024-07-13 16:30:03       17 阅读
  5. 金币程序题

    2024-07-13 16:30:03       21 阅读
  6. Docker Compose 启动容器例子

    2024-07-13 16:30:03       20 阅读
  7. vue3下载base64文件

    2024-07-13 16:30:03       22 阅读
  8. 使用 WebSocket 进行实时数据传输

    2024-07-13 16:30:03       21 阅读
  9. Redis中的管道技术

    2024-07-13 16:30:03       19 阅读
  10. C语言学习第一章--分步编译

    2024-07-13 16:30:03       17 阅读