本文摘自PHP中文网,作者藏色散人,侵删。
float高度不一致导致错位的解决办法:1、给换行开始的第一个元素加上“clear:left;”;2、给父元素定义“font-size:0;”,再定义“display:inline-block;vertical-align:top;”即可。
本文操作环境:Windows7系统、HTML5&&CSS3版,DELL G3电脑。
推荐:css视频教程
当N个元素浮动后,会导致错位的问题。一般给元素一个固定的height就没有这个现象,下面与大家分享下当高度不一致时的解决方法。
float元素高度不一致导致错位怎么解决?
一、解决方法是给换行开始的第一个元素加上 clear:left; 即可。
例如 四列时应该时第5个、9个...加clear:left;
1 2 3 4 |
|
4n+1 选择一行4列时下一行第一个元素
二、或者给父元素定义font-size:0; 浮动子元素定义需要的font-size, 再定义display:inline-block;vertical-align:top;
相关阅读 >>
更多相关阅读请进入《float》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者