微信小程序:在一个 view 中添加底部盒子并区分内容
在微信小程序中,可以通过使用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;
}
在上述代码中,我们创建了一个名为container的view容器,并在其中包含了两个盒子box1和box2。container容器的宽高可以根据实际需求进行设置,这里设置为300px。box1的宽高为200px,背景颜色为红色。box2的宽高为100px,背景颜色为蓝色。
通过设置box2的position属性为absolute,并设置bottom: 0,可以使其位于container容器的底部位置。
这样,我们就实现了在一个view中包含另一个盒子,并将其位于底部位置,并且两个盒子的颜色可以通过设置不同的background-color来区分。
原文地址: https://www.cveoy.top/t/topic/fTmU 著作权归作者所有。请勿转载和采集!