css左右⾃适应布局⼀、左边固定,右边⾃适应的布局
1. 左边左浮动,右边加个overflow:hidden;
#lt{ float: left;width:200px; background: #ff0;}
#rt{ overflow: hidden; background: #f0f;}
css布局左边固定右边自适应2. 左边左浮动,右边加个margin-left;
#lt{ float: left; width:200px; background: #ff0;}
#rt{ margin-left: 200px; background: #f0f;}
3. 左边绝对定位,右边加个margin-left;
#lt{ position: absolute; top:0; left:0; width:200px; background: #ff0;}
#rt{ margin-left: 200px; background: #f0f;}
4. 左右两边绝对定位,右边加个width,top,left,right
#lt{ position: absolute; top:0 ; left:0 ;width:200px; background: #ff0;}
#rt{ position: absolute; top:0 ; left:200px; width: 100% ; rigth:0;background: #f0f;}
⼆、右边固定,左边⾃适应的布局
1. 左边左浮动,margin-left负值,右边右浮动;
#lt{float:left; width:100%;background: #00f;margin-right: -200px;}
#rt{float: right; width: 200px;background: #ff0;}
2. 右边绝对定位,左边margin-right;
#lt{margin-right:200px; background: #00f;}
#rt{ position: absolute; right:0; top:0; width: 200px;background: #ff0;}
3. 左右两边绝对定位,左边加个width,top,left,right
#lt{ position: absolute; top:0; left:0; rigth:0; width: 100% ; background: #f0f;}
#rt{ position: absolute; top:0; left:200px; width:200px; background: #ff0;}
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论