使用絕對定位實現橫向兩列布局一般用于:一列固定寬度,一列自適應寬度。
主要應用技能:
relative-父元素相對定位。
absolute-自適應寬度元素絕對定位
注意:固定寬度列的高度>自適應寬度的列,否則會造成文檔的溢出。
主要應用技能:
relative-父元素相對定位。
absolute-自適應寬度元素絕對定位
注意:固定寬度列的高度>自適應寬度的列,否則會造成文檔的溢出。
2015-09-19
<style type="text/css">
*{margin:0; padding:0;}
#wrap{width:970px;margin:0 auto;}
#mainbody{margin-top:15px;position:relative;}
#left{width:110px;float:left}
#mid{width:650px;border:1px solid #999;margin-left:123px;}
#right{border: 1px solid #999;position: absolute;left: 790px;top: 0px;
}
</style>
*{margin:0; padding:0;}
#wrap{width:970px;margin:0 auto;}
#mainbody{margin-top:15px;position:relative;}
#left{width:110px;float:left}
#mid{width:650px;border:1px solid #999;margin-left:123px;}
#right{border: 1px solid #999;position: absolute;left: 790px;top: 0px;
}
</style>
2015-09-18
已采納回答 / pardon110
盒子模型3D圖層展示, 類似ps中的圖層原理,視角從上往下看,往下的圖層會被上級圖層所覆蓋。boder????????????????????????????????????//最上層content+paddingbackground:imagebackground-colormargin????????????????????????????????//最底層
2015-09-17
最贊回答 / 月下風物語
http://www.w3school.com.cn/css/css_positioning_floating.asp 看這個網站,上面說設置了float的元素脫離了文檔流,而第一種情況#mid沒有設置float,在定位的時候會忽視#left去定位,所以此處的margin-left:123px是距離#mainbody左邊界的123px處,導致兩種情況效果一樣。
2015-09-16