怎样让两个图标在一行排布?

小程序 文章 2020-09-08 10:41 0 17 全屏看文

怎样让两个图标在一行排布?How to arrange two icons in a row?

怎样让两个图标在一行排布?

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="/uploads/cj/article/2020/09/08/9e3130973b753c538704d4f92eb6f93c.jpg"> image>

   view>

    <view class="gengduobindtap="tapName">

      <image src="/uploads/cj/article/2020/09/08/8b4a261490018ecc42f24544f929a6b9.jpg"> image>

    view>

    van-grid>


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: image> view> image> view> van-grid>

回答:

1005:

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

 <view class="tuijian">

      <image src="/uploads/cj/article/2020/09/08/9e3130973b753c538704d4f92eb6f93c.jpg">image>

      <image src="/uploads/cj/article/2020/09/08/8b4a261490018ecc42f24544f929a6b9.jpg">image>

    view>


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

就可以了

呵呵:

怎么放一块啊

两个名称不同


-EOF-