怎样让两个图标在一行排布?
发布于 7 年前 作者 chaoliang 9927 次浏览 来自 问答

wxss:

.navbar{

  border-bottom: 1px solid #ccc;

  position: relative;

}

.navbar .title{

  position: absolute;

  width: 750rpx;

  text-align: center;

  left: 0;

  bottom: 20rpx;

  font-size: 30rpx;

  color: #fff;

}



.navbar .bj{

  width: 750rpx;

}

.container{

  width: 750rpx;

  /* position: fixed; */

  left: 0;

  bottom: 100rpx;

  z-index: 100;

  /* border-bottom: 1px solid #ccc; */

}


.swiper{

  width:  750rpx;

  height: 280rpx;

  display: flex;

  justify-content: center;

  align-items: center;

}


/* swiper{

  width:  700rpx;

  height: 280rpx;

  border-radius: 30rpx;

} */

.swiper image{

  width:  700rpx;

  height: 280rpx;

  border-radius: 30rpx;

}

.iconlist{

  margin-top: 10rpx;

  background-color: #fff;

}

.grid-item{

  padding: 10rpx 0 0 !important;

}

/* .gengduo{

  width: 750rpx;

  height: 50rpx;

  display: flex;

  justify-content: center;

  align-items: center;

  z-index: 100;

  position: relative;

  background-color: #fff;

  padding: 20rpx;

  margin-top: 5rpx;

}

.tuijian{

  width: 300rpx;

  height: 50rpx;

  display: flex;

  justify-content: center;

  align-items: center;

  z-index: 100;

  position: relative;

  background-color: #fff;

  padding: 20rpx;

  left:200rpx;

  

} */

.icon{

  width:750rpx;

  height:250rpx;

}

.gengduo{

  width: 300rpx;

  height: 50rpx;

  display: flex;

  justify-content: center;

  align-items: center;

  z-index: 100;

  position: relative;

  background-color: #fff;

  padding: 20rpx;

  margin-top: 5rpx;

  left:400rpx

 

}

.tuijian{

  width: 300rpx;

  height: 50rpx;

  display: flex;

  justify-content: center;

  align-items: center;

  z-index: 100;

  position: relative;

  background-color: #fff;

  padding: 20rpx;

  padding-top: 50rpx;

  

}

.gengduo image{

  height: 50rpx;

}

.tuijian image{

  height: 100rpx;

  justify-content: center;

  align-items: center;

  left:200rpx;

}


.tjlist{

  background-color: #fff;

}

.product image{

  width: 360rpx;

  height: 360rpx;

}

.product .title{

  display: flex;

  height: 80rpx;

  align-items: center;

  font-size: 30rpx;

  white-space: nowrap;

}

.product .title image{

  width: 80rpx;

  height: 40rpx;

}

.product .title text{

  width: 270rpx;

  text-overflow: ellipsis;

  overflow: hidden;

  margin-left: 10rpx;

}


wxml:

<van-grid custom-class="iconcolumn-num="2border="{{false}}">

  <view class="tuijian">

    <image src="/assets/images/tuijian3.png">image>

  view>

    <view class="gengduobindtap="tapName">

      <image src="/assets/images/gengduo.svg">image>

   view>

   van-grid>

3 回复

先让这2个图在同一个view里,然后给view写样式

 <view class="tuijian">

      <image src="/assets/images/tuijian3.png">image>

      <image src="/assets/images/gengduo.svg">image>

    view>


.tuijian{display: flex;align-items: center;}

就可以了

怎么放一块啊

两个名称不同

回到顶部