.fix 布局修复样式类


1.1 修复子元素浮动引起的父元素高度丢失


<div id="t1-f1" class="t1">#t1-f1
	<div id="t1-s1">#s-div1</div> // 左浮动
	<div id="t1-s2">#s-div2</div> // 右浮动, 200px高度
</div>
<div id="t1-f2" class="t1">#t1-f2</div>
					

解决方案:父元素应用 .fix 样式即可.


#t1-f1
#s-div1
#s-div2
#t1-f2

1.2 修复父元素与子元素的重叠


<div id="t2-f1">
	<div id="t2-s1">#t2-s1</div> // 上下外间距10px margin: 10px 0;
	<div id="t2-s1">#t2-s2</div> // 上下外间距10px margin: 10px 0;
</div>
					
问题: 会发现第一个div的上边距与最后一个div的下边距没有了 与 父元素重叠.
解决方案1: 父元素设置内填充解决, 给父元素设置内填充1px, 就不会与子元素重叠
解决方案2: 父元素应用.fix样式类
					

#s-div1
#s-div2
#s-div2

1.3 修复同级元素上下间距重叠


css外边距margin重叠

<div id="t2-f1">
	<div id="t2-s1">#t2-s1</div> // 下外间距10px
	<div id="t2-s1">#t2-s2</div> // 上外间距10px
</div>
					
方案1:
#t2-f1内的所有子元素都设置为float:left; (子元素需要有自己的宽度高度, 父元素应用`.fix`)
方案2:
#t2-f1内的所有子元素都显示为display:inline-block; (qpf-ui提供了 .fix-margin添加给子元素即可)

jquery版本:
- 传入父元素即可, 会为所有的子元素应用样式.

function fix_margin_float(e){
	$(e).addClass('fix');
	$(e).children().each(function(e){
		$(this).css("float","left");
	});
}
function fix_margin(e){
	$(e).children().each(function(e){
		$(this).addClass('fix-margin');
	});
}
					

解决方案, 所有子元素应用 .fix-margin 样式


#t2-s1
#t2-s2