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;
	}
相关推荐
华玥作者19 小时前
[特殊字符] VitePress 对接 Algolia AI 问答(DocSearch + AI Search)完整实战(下)
前端·人工智能·ai
Mr Xu_19 小时前
告别冗长 switch-case:Vue 项目中基于映射表的优雅路由数据匹配方案
前端·javascript·vue.js
前端摸鱼匠19 小时前
Vue 3 的toRefs保持响应性:讲解toRefs在解构响应式对象时的作用
前端·javascript·vue.js·前端框架·ecmascript
lang2015092819 小时前
JSR-340 :高性能Web开发新标准
java·前端·servlet
好家伙VCC20 小时前
### WebRTC技术:实时通信的革新与实现####webRTC(Web Real-TimeComm
java·前端·python·webrtc
未来之窗软件服务21 小时前
未来之窗昭和仙君(六十五)Vue与跨地区多部门开发—东方仙盟练气
前端·javascript·vue.js·仙盟创梦ide·东方仙盟·昭和仙君
嘿起屁儿整21 小时前
面试点(网络层面)
前端·网络
VT.馒头21 小时前
【力扣】2721. 并行执行异步函数
前端·javascript·算法·leetcode·typescript
phltxy1 天前
Vue 核心特性实战指南:指令、样式绑定、计算属性与侦听器
前端·javascript·vue.js
Byron07071 天前
Vue 中使用 Tiptap 富文本编辑器的完整指南
前端·javascript·vue.js