div中只有一张图片时，底部会有空白，需要加lineheight:0

忘是亡心i 2021-07-25 16:24 307阅读 0赞

div中只有一张图片时，底部会有高度，使得底部会有空白，需要加lineheight:0，子元素中还必须加入lineheight:normal,不然子元素会受到影响

<template>
      <view class="" v-if="data">
        <uni-grid :column="2" :square="false" :showBorder="false">
        	<uni-grid-item v-for="(item,index) in data.list" :key="index">
    			<view class="item" :style="{marginLeft:index%2==0?'10rpx':'5rpx'}" style="width: 360rpx;margin-left: 10rpx;">
    				<view style="position: relative;border-radius: 4px;overflow: hidden;line-height: 0;">
    					<image :src="item.roomSrc" mode="" style=" width: 360rpx;height: 220rpx;"></image>
    					<text style="background-color: rgba(0,0,0,0.3); position: absolute;right: 0rpx;top:0; color: white;font-size: 24rpx;padding: 3px;line-height:normal;">{ { item.hn}}</text>
    					<view class="" style="font-size: 20rpx; display: flex;align-items:center; position:absolute; background-color: rgba(0,0,0,0.3);padding: 3px; left: 0rpx;bottom:10rpx; color: white;">
    						<image :src="item.avatar" mode="" style="width: 30rpx;height: 30rpx;"></image>
    					    <text >{ { item.nickname}}</text>
    					</view>
    				</view>
    				<view class="">
    					<text>{ { item.roomName}}</text>
    				</view>
    			</view>
    		</uni-grid-item>
        	
        </uni-grid>
      </view>
    </template>
    
    <script>
    
    
    export default { 
      name: '',
      data () { 
        return { 
          href:'https://m.douyu.com/api/room/list',
    	  data:null
        }
      },
      mounted() { 
      	this.getData()
      },
      methods:{ 
       getData(){ 
    	   uni.request({ 
    	   	url:this.href,
    		method:"GET",
    		data:{ type:'LOL',page:1},
    		success: (res) => { 
    			console.log(res)
    			this.data=res.data.data
    		}
    	   })
       }
      }
    }
    </script>
    
    <style lang="less" scoped>
    
    </style>
    e: 20rpx; display: flex;align-items:center; position:absolute