uni-app: несколько методов для отображения двух представлений в одной строке.

Эффект

Способ 1: flexМакет

После использования значение display: flexпо умолчанию — , то есть расположено горизонтально.flex-directionrow

<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>

Способ 2: 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>

Способ 3: 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>

Способ 4: grid макет сетки

Использование  grid макета сетки: вы можете установить контейнер,  display: gridа затем использовать  grid-template-columns свойства, чтобы установить ширину двух столбцов.

注：1frЭто единица, представляющая распределение оставшегося пространства, где frпредставляет собой «долю».

Например, если у вас есть контейнер, и вы установили его 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>

 Метод 5: 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>