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;
	}
相关推荐
kyriewen114 分钟前
每日知识点:this 指向之谜——是谁在 call 我?
前端·javascript·vue.js·前端框架·ecmascript·jquery·html5
浩星5 分钟前
electron系列6之性能优化:从启动慢到内存泄漏
前端·javascript·electron
飞Link9 分钟前
pprint 全量技术手册:复杂数据结构的结构化输出引擎
开发语言·前端·python
Ruihong13 分钟前
Vue 迁移 React 实战:VuReact 一键自动化转换方案
前端·vue.js
opbr15 分钟前
还在手写 env 类型定义?这个 Vite 插件帮你自动搞定!
前端·vite
Qinana15 分钟前
前端正则表达式全解:从基础语法到实战应用
前端·javascript·面试
烟话621 分钟前
vue3响应式基础
前端·javascript·vue.js
boombb23 分钟前
用户反馈入口
前端
im_AMBER25 分钟前
万字长文:手撕JS深浅拷贝完全指南
前端·javascript·面试
@大迁世界30 分钟前
20.“可复用组件”具体指的是什么?如何设计与产出这类组件?.
开发语言·前端·javascript·ecmascript