在微信小程序中,可以通过使用view组件和view组件的position属性来实现在一个view中包含另一个盒子,并将其位于底部位置。

具体的代码如下所示:

<view class='container'>
  <view class='box1'></view>
  <view class='box2'></view>
</view>
.container {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: #ccc;
}

.box1 {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: red;
}

.box2 {
  position: absolute;
  bottom: 0;
  width: 100px;
  height: 100px;
  background-color: blue;
}

在上述代码中,我们创建了一个名为containerview容器,并在其中包含了两个盒子box1box2container容器的宽高可以根据实际需求进行设置,这里设置为300px。box1的宽高为200px,背景颜色为红色。box2的宽高为100px,背景颜色为蓝色。

通过设置box2position属性为absolute,并设置bottom: 0,可以使其位于container容器的底部位置。

这样,我们就实现了在一个view中包含另一个盒子,并将其位于底部位置,并且两个盒子的颜色可以通过设置不同的background-color来区分。

微信小程序:在一个 view 中添加底部盒子并区分内容

原文地址: https://www.cveoy.top/t/topic/fTmU 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录