一侧自适应样式在工作中经常遇到,整理下目前知道的解决方法:
基本样式:
div{line-height:30px;text-align:center;} .fl{background-color:#ff0;} .fr{background-color:#f0f;}
<div class=div> <div class="fl">left</div> <div class="fr">right</div> </div>
第一种方法:
.div1 .fl{float:left;width:200px;} .div1 .fr{overflow:hidden;}
第二种方法:
.fl{float:left;width:200px;} .fr{ margin-left:200px;}
第三种方法:
.fl{position:absolute;top:0;left:0;width:200px;} .fr{margin-left:200px;}
第四种方法:
.fl{position:absolute;top:0;left:0; width:200px;} .fr{position:absolute;top:0;left:200px;right:0;}
第五种方法:
.div{position:relative;padding-left:200px;} .fl{ position:absolute;width:200px;top:0;left:0;}
显示效果: