效果
方法一: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>