CSS-布局2-中间固定两边自适应

1、布局概述

中间固定，两边自适应布局，这是一种非常罕见的布局。例如下图，测试剧中，这几个字固定宽度，左右的红线根据屏幕自适应。

image.png

2、实现思路1- 浮动加负边距

实现思路
（1） 创建左中右3个div。
（2）左边div各占50%宽度;左边div的左边负边距，设置为中间div宽度的一半。
（3）右边div各占50%宽度;右边div的右边负边距，设置为中间div宽度的一半。
源代码：

 


    
    
    


    

        

            

        
        
测试居中
        

            

        
    
     

运行效果：

image.png

删除中间div后，运行效果：

image.png

3、实现思路2-弹性合作模型

实现思路:
（1） 创建左中右3个div。
（2） 设置负div为弹性盒子模型。
（3） 设置左右div的flex-grow 为1 。
源代码：

 


    
    
    


    

        

            

        
        
测试剧中
        

            

        
    
     

4、实现类似显示效果。

如果只实现类似的显示效果。另外一种实现思路。
（1） 设置div 的行高为1px。
（2） 设置div 的左边框、右边框 宽度为1px solid red;
（3 ） 方案缺点： 不能左右自动适应，只能应用固定宽度的需求。

 


    
    
    


    

        
测试剧中