css实现两边牢固中间自顺应布局的四种常用办法

本篇文章给大家带来的内容是对于css实现两边牢固中间自顺应布局的四种常用办法，有一定的参照 价值，有需要的伴侣可以参照 一下，但愿对你有所帮忙。? 本篇文章给大家带来的内容是对于css实现两边牢固中间自顺应布局的四种常用办法，有一定的参照 价值，有需要的伴侣可以参照 一下，但愿对你有所帮忙。

解析四种常用办法以及道理：浮动、浮动内嵌 div、定位、flex。

浮动

    
我在左边
    
我在右侧
    
我排最后，但是跑到中间来了

道理：

• 浮动元素和非浮动元素不在统一个立体空间，要是不清浮动，位置在它下面的元素将往上浮。

• 浮动元素高度为0，浮动盒子层级比 block 块级水平盒子高，比 inline/inline-block 水平盒子低。

浮动内嵌div

    

        
            我在中间
         
    
    
我在左边
    
我在右侧

道理：

• 三个元素都浮动，其中主题元素沾满一行 100% ，应用负 margin 把摆布两边的元素放好。

• 主题元素里面再套一个子元素，子元素 margin: 0 200px ，防止内容跑到摆布两块浮动元素下面被覆盖。

定位

    
我在中间，我用 margin 对消摆布两块定位元素占领空间
    
我在左边，我是定位元素
    
我在右侧，我是定位元素

道理：

• 摆布两个元素定位，可听任意位置。

• 中间元素用 margin: 0 200px，防止内容跑到摆布两块定位元素下面被覆盖。

flex

    
我在左边
    
我在中间，flex: 1 主动占领剩余空间
    
我在右侧

道理：

flex 布局，子元素默许水平罗列。

flex: 0 1 auto -> 默许，占领空间不追随父级放大，追随变小，本身原来宽度

flex: 1 1 auto -> auto，占领空间追随父级放大，同时追随变小，本身原来宽度

flex: 0 0 auto -> none，占领空间不追随父级放大，同时也不追随变小，本身原来宽度

flex: 1 1 1 -> auto，占领空间追随父级放大，同时追随变小，而且主动占满剩余空间

以上就是css实现两边牢固中间自顺应布局的四种常用办法的细致内容，更多请关注 百分百源码网 其它相干文章！