常见的自适应布局

我们在工作中经常遇到一种只适应布局： 左边是固定宽度，右边会随着父元素的宽度二变化；如下图

左边是头像和名称固定为80px，右边宽度会随着分辨率的不同而变化，所以他是不固定的宽度。

布局方法（一）：

　　利用css的calc()方法，如  ：  

width: calc(100% - (10px + 5px) * 2);

 

　　calc()使用通用的数学运算规则，但是也提供更智能的功能：

1. 使用“+”、“-”、“*” 和 “/”四则运算；
2. 可以使用百分比、px、em、rem等单位；
3. 可以混合使用各种单位进行计算；
4. 表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；
5. 表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。

　　浏览器的兼容性

　　浏览器对calc()的兼容性还算不错，在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持，同样需要在其前面加上各浏览器厂商的识别符，不过可惜的是，移动端的浏览器还没仅有“firefox for android 14.0”支持，其他的全军覆没。

布局方法（二）：方法一的兼容性明显不能符合所有工作要求

　　布局思路：左边正常布局，右边宽度设置为100%，并且设置padding-left为左边的宽度，让右边绝对定位在左边的下一个层级；

　　HTML:

<div class="accept-li">
       <div class="left">
            <div>
                <img src="../../images/tx1.png" alt="" />
            </div>
            <p>顾琉璃</p>
        </div>
        <div class="textarea-box">
            <textarea name="" rows="4" cols="" placeholder="请输入。。。">    
            </textarea>
        </div>
 </div>      

　　CSS:

.accept-li{
	width: 100%;
	margin: 0;
	padding: 0 10px;
	box-sizing: border-box;
	position: relative;
}
.accept-li .textarea-box{
	display: inline-block;
	width: 100%;
	padding-left: 80px;
	padding-right: 10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	position: absolute;
	z-index: 0;
	left: 0;
}
.accept-li .left{
	width: 57px;
	text-align: center;
	display: inline-block;
	vertical-align: top;
}

 

布局方法（三）：使用flex进行布局，不过这种方法的兼容性也不是很理想，推荐文档 -- http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html  （阮一峰-Flex布局教程）；

终上所述：第二种方法的兼容性最好，推荐使用