使用绝对定位实现横向两列布局一般用于:一列固定宽度,一列自适应宽度。
主要应用技能:
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