父级view中有两个view横向排布,第一个设定了固定宽度120rpx,第二个怎么设置自动占满剩下的宽度
时间: 2024-04-01 13:32:50 浏览: 20
您可以在第二个view的样式中设置`flex: 1`,这样第二个view就会自动占满剩下的宽度。具体实现代码如下:
```css
.parent {
display: flex;
flex-direction: row;
}
.child1 {
width: 120rpx;
}
.child2 {
flex: 1;
}
```
其中,`.parent`为父级view的样式类名,`.child1`和`.child2`分别为两个子view的样式类名。这样,第一个子view(`.child1`)会固定宽度为120rpx,第二个子view(`.child2`)则会自动占满剩下的宽度。
相关问题
微信小程序设置view的宽度为四个汉字,仅设置rpx无效
如果仅使用 rpx 设置 view 的宽度无效,可能是因为 rpx 的换算比例有误或者在样式中存在其他的影响宽度的属性。
此时,你可以尝试使用百分比单位来设置 view 的宽度。假设一个汉字的宽度为 20%,那么设置四个汉字的宽度可以通过以下方式实现:
```xml
<view style="width: 80%;">
<!-- 内容 -->
</view>
```
在上面的代码中,将 view 的宽度设置为 80%。这样就可以保证 view 的宽度为四个汉字的宽度。同样,你可以根据实际情况调整汉字的宽度和需要设置的 view 的宽度。
uniappscroll-view横向滚动上下两个盒子
可以使用uniapp的scroll-view组件实现横向滚动。需要设置scroll-x属性为true,同时设置容器的宽度为所有子项宽度之和,子项使用display:inline-block属性实现横向排列。以下是一个示例代码:
```
<scroll-view class="scrollContainer" scroll-x>
<view class="scrollitem" v-for="(item, index) in goodsArr" :key="index" @click="getItem(item)">
<image class="scrollimage" :src="item.contentPic"></image>
<view class="recommandItemText">{{item.contentTitle}}</view>
</view>
<view class="EmptyData" v-if="goodsArr.length==0">暂无数据</view>
</scroll-view>
<style>
/* 容器 */
.scrollContainer {
width: 666rpx;
height: 234rpx;
white-space: nowrap;
}
/* 容器项 */
.scrollitem {
display: inline-block;
margin-left: 30rpx;
height: 234rpx;
}
.scrollimage {
width: 270rpx;
height: 154rpx;
}
.recommandItemText {
width: 270rpx;
text-align: center;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.EmptyData {
text-align: center;
margin-top: 50rpx;
}
</style>
```
以上代码中,scroll-view组件的scroll-x属性设置为true,容器的宽度设置为所有子项宽度之和,子项使用display:inline-block属性实现横向排列。同时,还可以设置子项的样式,例如图片大小、文字样式等。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)