float元素波动后高宽比不1致致使移位的处理办方

日期:2020-09-23 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

当N个元素波动后,会致使移位的难题。1般给元素1个固定不动的height就沒有这个状况。

可是当高宽比不1致时,就必须想其他方法来处理了:

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、给换行后的第1个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分辨便可。