uni-app：多方法实现两个view在同一行展示（布局）_两个view放在一行

效果

方法一：flex 布局

使用 display: flex 后，默认的 flex-direction 值就是 row，即水平排列。

<template>
	<view class="container">
		<view class="left-view">123</view>
		<view class="right-view">456</view>
	</view>
</template>
 
<style>
	.container {
		display: flex;
		/* 使用 flex 布局 */
		justify-content: space-between;
		/* 左右两个视图分散排列 */
	}
 
	.left-view {
		width: 50%;
		/* 左侧视图占据容器的一半宽度 */
		background-color: red;
	}
 
	.right-view {
		width: 50%;
		/* 右侧视图占据容器的一半宽度 */
		background-color: blue;
	}
</style>

方法二：float 属性

给左侧视图设置 float: left，给右侧视图设置 float: right，这样它们就会在同一行显示。

<template>
	<view class="container">
		<view class="left-view">123</view>
		<view class="right-view">456</view>
	</view>
</template>
 
<style>
	.left-view {
		float: left;
		width: 50%;
		/* 左侧视图占据容器的一半宽度 */
		background-color: red;
	}
 
	.right-view {
		float: right;
		width: 50%;
		/* 右侧视图占据容器的一半宽度 */
		background-color: blue;
	}
</style>

方法三：inline-block 属性

给左侧视图和右侧视图都设置 display: inline-block，使它们在同一行显示。

<template>
	<view class="container">
		<view class="left-view">123</view>
		<view class="right-view">456</view>
	</view>
</template>
 
<style>
	.left-view,
	.right-view {
		display: inline-block;
		width: 50%;
		/* 视图占据容器的一半宽度 */
	}
 
	.left-view {
		background-color: red;
	}
 
	.right-view {
		background-color: blue;
	}
</style>

方法四：grid 网格布局

使用 grid 网格布局：可以将容器设置为 display: grid，然后使用 grid-template-columns 属性设置两列的宽度

注：1fr 是一个表示剩余空间分配的单位，其中 fr 代表 "fraction"（分数）。

例如，如果有一个容器，并且设置 grid-template-columns: 1fr 2fr;，那么第一个轨道的宽度将占总剩余空间的 1/3，而第二个轨道的宽度将占总剩余空间的 2/3。

类似地，如果设置 grid-template-columns: 1fr 1fr 1fr;，则三个轨道将平均占据总剩余空间的 1/3，实现等分效果。

<template>
	<view class="container">
		<view class="left-view">123</view>
		<view class="right-view">456</view>
	</view>
</template>
 
<style>
	.container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		/* 将容器分为两列，每列宽度相等 */
	}
 
	.left-view {
		background-color: red;
	}
 
	.right-view {
		background-color: blue;
	}
</style>

 方法五：table 表格布局

使用 table 表格布局：可以将容器设置为 display: table，每个子视图都设置为 display: table-cell，这样它们就会自动在同一行排列。

<template>
	<view class="container">
		<view class="left-view">123</view>
		<view class="right-view">456</view>
	</view>
</template>
 
<style>
	.container {
		display: table;
		width: 100%;
	}
 
	.left-view,
	.right-view {
		display: table-cell;
	}
 
	.left-view {
		background-color: red;
	}
 
	.right-view {
		background-color: blue;
	}
</style>