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;
	}
相关推荐
程序员黑豆23 分钟前
鸿蒙应用开发之双向绑定实战:从 V1 到 V2 的完整迁移指南
前端·harmonyos
Escape25 分钟前
为什么你的 AI 越聊越傻?从 Token 到 Agent,彻底搞懂 AI Agent的秘密㊙️
前端·人工智能·后端
李明卫杭州1 小时前
Vue3 响应式概念 ↔ React 对应方案(类组件与函数组件)对照笔记
前端·vue.js·react.js
windliang1 小时前
Claude Code 源码分析(二):CC 的心脏 queryLoop Agent主循环
前端·ai编程·claude
Revolution611 小时前
reactive 对象重新赋值后,表单为什么没有恢复默认值
前端·vue.js·面试
米饭同学i1 小时前
微信小程序 input maxlength 遇上输入法拼音被截断?这是最完整的解决方案
前端
董员外1 小时前
RAG 系统进化论(二):Naive RAG,检索增强生成的最小闭环
前端·人工智能·后端
脾气有点小暴1 小时前
ECharts 伪 3D 柱状图完整注释 + 实现原理说明
前端·3d·信息可视化·vue·echarts
掘金一周1 小时前
看看大家每月的成本有多少 | 沸点周刊 7.30
前端·人工智能·后端
ji_shuke2 小时前
从零深入:基于 Playwright + Pytest + Allure 的企业级 Web 端到端自动化测试框架实战
前端·自动化测试·docker·jenkins·pytest·allure·playwright