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判断即可。 float,高度不一致,错位
|