使用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
相关文章推荐
- 解决IE6下div table 使用display:none;隐藏时仍然占空白位置
- li元素中包含img元素出现5px空白的解决方法
- 在使用inline-block在垂直排列中,出现缝隙的解决办法
- Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法
- Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法
- iOS 中TextKit的使用中,设置部分字体,出现的问题及解决方法
- ie6 li间隙问题 使用float属性是出现空白的解决方法
- Q6:关于xcode TableView使用Nib文件出现Assertion failure in dequeueReusableCellWithIdentifier:forIndexPath:错误
- NGUI中使用UIGrid时出现cell重叠解决办法
- iOS-tableview上方出现一段空白的原因及解决办法
- 使用getChildFragmentManager解决Fragment嵌套ViewPager出现空白
- Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法
- 遇到的错误-----MySQL使用临时表 出现 “ERROR 1137 (HY000): Can't reopen table” 的异常 解决方法
- 对table的tr使用display:block显示colspan失效问题的解决
- dedecms网站出现多图发布无法使用页面空白的原因及解决办法
- 在进行页面的DIV CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是“见机行事”。
- Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法
- 遇到的错误-----MySQL使用临时表 出现 “ERROR 1137 (HY000): Can't reopen table” 的异常 解决方法
- 利用display:table-cell让文字垂直居中(无论元素多少行)
- Android-使用Theme来解决启动app是出现的空白屏