今天遇到个CSS样式问题,而且单单在部分人的360浏览器上出现了这样的问题。也是考虑上的失误及经验上的不足。
是这样的一共是四个div,但高度不定。需要做成两两一行的样式。之前没做多大考虑,直接用了float,在大部分浏览器上并未出现问题。但在360浏览器(别人的)出现错位问题。
即第一行第一个元素过高导致第三个元素排在了第二个下面。
网上搜罗了一下方法,在不影响原来布局的情况下,考虑选择放弃float,改使用display:inline-block.
但是此时又出现一个问题是display:inline-block.默认div 之间有间隙。去除间隙有几种方法
1.原因在于标签之间的间隙,那么就去掉标签之间的空格。问题解决。但是这样代码可能不美观,可读性差。
2 网上还有方法是margin使用负值,此法并不推荐,控制不好。
3 个人更偏爱第三种方法,给这些div 元素父级设置font-size:0;当然为了对齐,只需再设置vertical-align:top.就搞定了。
解决问题好开心,忽然爱上了编程。。。。。