#wrap{width:970;margin:0 auto;}
#mainbody{position:relative;margin-top:15px;}
#left{float:left;width:110px;}
#mid{margin-left:123px;width:650px;......}
#right{position:absolute;margin-left:790px;top:0;width:180px;....}
#mainbody{position:relative;margin-top:15px;}
#left{float:left;width:110px;}
#mid{margin-left:123px;width:650px;......}
#right{position:absolute;margin-left:790px;top:0;width:180px;....}
2017-05-27
关于float的心得体会:
float会使元素脱离标准文档流,从而漂浮在空中。当mainbody里两个box都浮动了,mainbody里等于没有东西了,就会缩成一条线抵着header,从而视觉上看起来消失了。而footer处在标准文档流中自然就会顶上来。但是footer的内容仍然会围绕浮动的box显示。
float会使元素脱离标准文档流,从而漂浮在空中。当mainbody里两个box都浮动了,mainbody里等于没有东西了,就会缩成一条线抵着header,从而视觉上看起来消失了。而footer处在标准文档流中自然就会顶上来。但是footer的内容仍然会围绕浮动的box显示。
2017-05-26
浮动效果实现有两种方法:一种采用绝对定位的方法:position:absolute;
第二种采用float属性的方法进行浮动(两列效果的常用),即float:left;
#left{/*float:left;*/position:absolute;width:110px;}
#mid{/*float:left;*/position:absolute;margin-left:123px;width:650px;}
#right{position:absolute;margin-left:790px;border:1px solid #999;}
第二种采用float属性的方法进行浮动(两列效果的常用),即float:left;
#left{/*float:left;*/position:absolute;width:110px;}
#mid{/*float:left;*/position:absolute;margin-left:123px;width:650px;}
#right{position:absolute;margin-left:790px;border:1px solid #999;}
2017-05-24
正确答案:
#mainbody{position:relative;;margin-top:15px;}
#left{float:left; margin-right:13px; width:110px; border:1px solid #999;}
#mid{float:left; margin-right:17px;width:650px;border:1px solid #999;}
#right{position:absolute;right:0px; margin-left:794px; border:1px solid #999;}
#mainbody{position:relative;;margin-top:15px;}
#left{float:left; margin-right:13px; width:110px; border:1px solid #999;}
#mid{float:left; margin-right:17px;width:650px;border:1px solid #999;}
#right{position:absolute;right:0px; margin-left:794px; border:1px solid #999;}
2017-05-23