父元素haslayout=-1,若干子元素浮动,当最后一行子元素的总宽度及单个子元素的(width+border+margin+padding)乘以最后一行的元素个数小于父元素宽度 (设置或继承)加2px时,最后一行子元素margin-bottom被忽略。
用一个简单的表达式表示:
var SEOW=单个子元素的整体宽度(margin+padding+border+width);
var PEW=父元素的宽度(width, 设置或继承);
var N=最后一行子元素的个数;
if(SEOW*N<PEW+2){
//最后一行子元素margin-bottom被忽略。
}
例如下面,父元素UL,5个子元素LI构成1行,因为只有一行所以这也是最后一行。
ul{width:802px;border-bottom:1px solid red;list-style:none;*zoom:1;}
/*父元素ul的宽度为802px*/
ul li{width:120px;height:100px;margin:50px 10px;padding:10px;float:left;background:pink;_display:inline;}
/*
*子元素li的总宽度为width:120px+padding:20+margin:20px=160px;共5个LI,160*5=800px
*当UL的宽度大于802px时,LI的margin-bottom就会被忽略(例二)
*/
例一
例二
目前还没有找到比较好的解决办法。