#wrap{width:970px; margin:0 auto;}
#mainbody{position:relative; margin-top:15px;}
#left{top:0;width:110px; }
#mid{position:absolute;
margin-left:123px;top:0;
width:650px;border:1px solid #999;}
#right{position:absolute;border:1px solid #999;top:0;margin-left:790px;}
#mainbody{position:relative; margin-top:15px;}
#left{top:0;width:110px; }
#mid{position:absolute;
margin-left:123px;top:0;
width:650px;border:1px solid #999;}
#right{position:absolute;border:1px solid #999;top:0;margin-left:790px;}
2015-09-19
使用绝对定位实现横向两列布局一般用于:一列固定宽度,一列自适应宽度。
主要应用技能:
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