#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