float高度不一致导致错位的解决方法-创新互联
这篇文章主要介绍float高度不一致导致错位的解决方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
成都创新互联云计算的互联网服务提供商,拥有超过13年的服务器租用、重庆服务器托管、云服务器、网络空间、网站系统开发经验,已先后获得国家工业和信息化部颁发的互联网数据中心业务许可证。专业提供云主机、网络空间、域名与空间、VPS主机、云服务器、香港云服务器、免备案服务器等。float高度不一致导致错位的解决办法:1、给换行开始的第一个元素加上“clear:left;”;2、给父元素定义“font-size:0;”,再定义“display:inline-block;vertical-align:top;”即可。
当N个元素浮动后,会导致错位的问题。一般给元素一个固定的height就没有这个现象,下面与大家分享下当高度不一致时的解决方法。
float元素高度不一致导致错位怎么解决?
一、解决方法是给换行开始的第一个元素加上 clear:left; 即可。
例如 四列时应该时第5个、9个...加clear:left;
.row .col-lg-3:nth-child(4n+1), .row .col-md-3:nth-child(4n+1){ clear:left; }
4n+1 选择一行4列时下一行第一个元素
二、或者给父元素定义font-size:0; 浮动子元素定义需要的font-size, 再定义display:inline-block;vertical-align:top;
ul{ margin:0; padding:0; list-style-type:none; font-size:0; } ul li{ width:160px; display:inline-block; vertical-align:top; font-size:12px; }
以上是“float高度不一致导致错位的解决方法”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
网站栏目:float高度不一致导致错位的解决方法-创新互联
浏览地址:http://myzitong.com/article/dpijeg.html