您的位置:首页 > 其它

使用display:table-cell元素部分出现空白缝隙的结解决

2017-01-19 11:25 351 查看
<div class="hotelPicDiv">
<div><img class="hotelPic" src="resources/images/hotel/40793bc11d7351dae2ebfc9135856832.jpg" /></div>
</div>


.hotelPicDiv{ width:3rem; height:3rem;overflow:hidden; float:left; margin:0.345rem 0.285rem; display: table;}
.hotelPicDiv div{ display:table-cell; vertical-align:middle; line-height: 0;}
.hotelPic{ width:100%;}


此处终点标注关键三个属性.hotelPicDiv{ display: table;}

.hotelPicDiv div{ display:table-cell; vertical-align:middle; line-height: 1;}

重中之重: line-height: 1;

解决缝隙的关键就是他了,原理请参考:http://blog.csdn.net/hmily_hui/article/details/54614028
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐