float元素浮动后高度不一致导致错位的解决办方法

ttx9n · 发表于 2013-11-18 16:33:27

当N个元素浮动后，会导致错位的问题。一般给元素一个固定的height就没有这个现象，下面与大家分享下当高度不一致时的解决方法当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判断即可。

wqpa63gz · 发表于 2022-9-17 19:33:39

大家都不容易！

3mfwk4yf · 发表于 2022-12-31 19:28:20

老衲笑纳了

q42obh · 发表于 2023-1-27 22:39:41

额风风风微风微风违法

thywok · 发表于 2023-6-24 04:03:46

给爸爸爸爸爸爸爸爸爸爸八佰伴八佰伴

qwe520 · 发表于 2023-7-16 01:56:27

为全额万千瓦

z835648964 · 发表于 2023-7-25 16:46:45

人都不在了啊啊

6q8s6p21 · 发表于 2023-7-30 05:43:39

那三门，你们谁寂寞才快乐撒

pb_tjc · 发表于 2023-8-7 07:20:37

啊啊啊啊啊啊啊啊啊啊啊啊啊啊

idy6_yus · 发表于 2023-10-16 23:54:44

人都不在了啊啊

账号		自动登录	找回密码
密码			立即注册

[CSS] float元素浮动后高度不一致导致错位的解决办方法

相关帖子