小程序
小游戏
企业微信
微信支付
扫描小程序码分享
如何让 1和2 与b 顶端对齐???
3 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
楼主,问题解决了吗?
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
你都写成是纵向布局了。。flex用的不多,你至少可以想办法拆分啊
比如,把 a 和 b 做成一组, 把 1 和 2 做成一组,先横向布局,再分别纵向布局
<view>
<view>a</view>
<view>b</view>
</view>
<view>1</view>
<view>2</view>
或者类似的, a 和 1 做成一组,b 和2 做成一组,先纵向布局,再分别横向布局
另外你可以用 flex:wrap来做。。不想写给你
/* 首页图片 */
.home_list_i{
margin-top:10rpx;
width: 100%;
height: 300rpx;
background:rgba(0, 146, 127, 0.2);
display: flex;
flex-direction: column;
justify-content:conter;
align-items: flex-start;
}
.home_list_img_title{
height: 30%;
background:rgba(121, 79, 79, 0.3);
.home_list_img_conter{
width: 70%;
flex:1 0 70%;
background:rgba(14, 255, 6, 0.3);
.home_list_img_photo{
width: 30%;
align-self: flex-end;
background:rgba(250, 246, 3, 0.3);
/*wxml */
<view class='home_list_i'>
<view class='home_list_img_title'>a</view>
<view class='home_list_img_conter'>b</view>
<view class='home_list_img_photo flex-sslf'>1</view>
<view class='home_list_img_photo flex-sslf'>2</view>
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
楼主,问题解决了吗?
你都写成是纵向布局了。。flex用的不多,你至少可以想办法拆分啊
比如,把 a 和 b 做成一组, 把 1 和 2 做成一组,先横向布局,再分别纵向布局
<view>
<view>
<view>a</view>
<view>b</view>
</view>
<view>
<view>1</view>
<view>2</view>
</view>
</view>
或者类似的, a 和 1 做成一组,b 和2 做成一组,先纵向布局,再分别横向布局
另外你可以用 flex:wrap来做。。不想写给你
/* 首页图片 */
.home_list_i{
margin-top:10rpx;
width: 100%;
height: 300rpx;
background:rgba(0, 146, 127, 0.2);
display: flex;
flex-direction: column;
justify-content:conter;
align-items: flex-start;
}
.home_list_img_title{
width: 100%;
height: 30%;
background:rgba(121, 79, 79, 0.3);
}
.home_list_img_conter{
width: 70%;
flex:1 0 70%;
background:rgba(14, 255, 6, 0.3);
}
.home_list_img_photo{
width: 30%;
flex:1 0 70%;
align-self: flex-end;
background:rgba(250, 246, 3, 0.3);
}
/*wxml */
<view class='home_list_i'>
<view class='home_list_img_title'>a</view>
<view class='home_list_img_conter'>b</view>
<view class='home_list_img_photo flex-sslf'>1</view>
<view class='home_list_img_photo flex-sslf'>2</view>
</view>