CSS-实现图片靠右

css 复制代码
<template>
	<view class="content">
		<div class="imgdiv">
			<img src="../../static/sousuo.png" alt="" />
			<img src="../../static/jiahao.png" alt="" />
		</div>
		<div class="topdiv">
			<h1>我的设备</h1>
			<p>12个设备</p>
		</div>
	</view>
</template>
.content {
		display: flex;
		flex-direction: column;
		width: 100%;
		/* 确保容器占满宽度,否则靠右效果不明显 */
		padding-right: 20rpx;
		/* 可以加一点右边距,避免贴在最右侧 */
		box-sizing: border-box;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.content .imgdiv {
		display: flex;
		justify-content: flex-end;
		/* 让整个 imgdiv 靠右 */
		gap: 20rpx;
		/* 两张图片之间的间距,比 margin-left 更方便 */
	}

	.imgdiv img {
		height: 60rpx;
		width: 60rpx;
		margin-left: 20rpx;
	}
相关推荐
DianSan_ERP6 小时前
电商架构演进:如何在高并发场景下实现多平台API的标准化履约?
运维·前端·网络·安全·架构·自动化
碎_浪9 小时前
给键盘党的英语记忆工具:我做了一款「打字背单词」桌面应用
前端·程序员·ai编程
阿成学长_Cain10 小时前
Linux dirs命令详解|Bash目录堆栈管理快速切换目录实战教程
linux·运维·前端·数据库
yqcoder10 小时前
httpOnly 是什么,又有什么用?
开发语言·前端·javascript
IT_陈寒10 小时前
Java的Stream.parallel()把我CPU跑爆了,这种优化要谨慎
前端·人工智能·后端
小皮虾11 小时前
小程序首页性能优化实战:从 4 秒到 1.8 秒
前端·微信小程序
山河木马11 小时前
GPU自动处理专题1-裁剪到底在裁什么(裁剪)
前端·webgl·计算机图形学
奔跑的蜗牛ing11 小时前
CentOS Nginx 安装与静态文件服务器配置指南
前端·面试·架构
子兮曰11 小时前
Bun 重写为 Rust:11天、64个Claude、16.5万美元,一次改变行业认知的激进实验
前端·后端·bun