html文字一行时靠右，多行时靠左

最新推荐文章于 2023-11-23 16:04:55 发布

ZionHH

最新推荐文章于 2023-11-23 16:04:55 发布

阅读量1.7k

点赞数 1

分类专栏： Notes 文章标签： html css 前端

本文链接：https://blog.csdn.net/z291493823/article/details/125800681

版权

Notes 专栏收录该内容

12 篇文章 2 订阅

订阅专栏

移动端常用的单元格，经常有这样的布局，左边label，右边内容区域，当内容文字靠右时，需要一行时靠右，多行时靠左。
在这里插入图片描述

实现1

<div class="cell">
	<div class="cell-label">单元格</div>
	<div class="cell-value">内容</div>
</div>
<div class="cell">
	<div class="cell-label">单元格</div>
	<div class="cell-value">内容内容内容内容内容内容内容内容内容内容内容内容</div>
</div>

.cell {
	display:flex;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid #e5e5e5;
}
.cell .cell-label {
	width: 120px;
}

实现2


<div class="cell">
	<div class="cell-label">单元格</div>
	<div class="cell-value">
		<div class="content">内容</div>
	</div>
</div>
<div class="cell">
	<div class="cell-label">单元格</div>
	<div class="cell-value">
		<div class="content">内容内容内容内容内容内容内容内容内容内容内容内容</div>
	</div>
</div>

.cell {
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid #e5e5e5;
}
.cell .cell-label {
	width: 120px;
}
.cell .cell-value {
	flex: 1;
	text-align: right;
}
.cell .cell-value .content {
	text-align: justify;
	display: inline-block;
}

实现3

<div class="cell">
	<div class="cell-label">单元格</div>
	<div class="cell-value">
		<div class="content">内容</div>
	</div>
</div>
<div class="cell">
	<div class="cell-label">单元格</div>
	<div class="cell-value">
		<div class="content">内容内容内容内容内容内容内容内容内容内容内容内容</div>
	</div>
</div>

.cell {
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid #e5e5e5;
}
.cell .cell-label {
	width: 120px;
}
.cell .cell-value {
	flex: 1;
}
.cell .cell-value .content {
	display: flex;
	justify-content: flex-end;
}