头闻号

段书林

进出口代理|商检报关|快递|综合性公司|货代|皮革

首页 > 新闻中心 > 科技常识:float元素浮动后高度不一致导致错位的解决办方法
科技常识:float元素浮动后高度不一致导致错位的解决办方法
发布时间:2024-12-24 08:52:15        浏览次数:6        返回列表

今天小编跟大家讲解下有关float元素浮动后高度不一致导致错位的解决办方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关float元素浮动后高度不一致导致错位的解决办方法 的相关资料,希望小伙伴们看了有所帮助。

当N个元素浮动后 会导致错位的问题。一般给元素一个固定的height就没有这个现象。 但是当高度不一致时 就需要想别的办法来解决了: 1、给父元素定义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; } 2、给换行后的第一个li添加clear:left 如: 复制代码代码如下: ul li{float:left;width:160px;} .c{clear:left;} <li>1</li> <li>2</li> <li>3</li> <li class="c">4</li> <li>5</li> <li>6</li> 在这里 程序循环时 添加个if判断即可。

来源:爱蒂网