uni-app：多方法实现两个view在同一行展示

效果

方法一：flex 布局

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

方法二：float 属性

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

方法三：inline-block 属性

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

方法四：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，实现等分效果。

 方法五：table 表格布局

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