这里举的两个例子中是以左侧為固定宽度，右侧为自适应的宽度

要实现这样的效果，本质是要实现元素宽度的自适应而元素宽度自适应有

1、使用行块级元素宽度默認继承父元素宽度，如div

2、设置块元素的宽度为父元素的100%

3、还有一个可能比较少了解的就是对绝对定位的元素设置left：0和right：0就可以使得元素嘚宽度展开到父元素的宽度（如果元素的宽度未设置具体宽度）

如归要实现一侧的宽度自适应，上述中2显然不合适

 

 方法一：对固定宽度嘚元素设置float，自适应的一侧（块级元素）通过margin避免两元素的重叠本质还是利用块级元素具有默认继承父元素宽度的特性。
 
 

 

 方法二：对自適应元素设置absolute定位通过left： 0， right： 0对自适应元素进行宽度拉伸再通过设置margin-left避免元素重叠
 
 

 

 当然，除了上述还有其它实现方法比如通过计算屬性设置自适应元素的宽度等，不过相对来说方法一在代码的简洁性或兼容性上，都会更好些
 
 

发布了54 篇原创文章 · 获赞 4 · 访问量 1万+