Flow、Position、Flexbox实现的布局

1、实现一个两栏布局，左侧占30%宽度，右侧占70%宽度 （使用float）

如下图所示

我用了浮动 float : left ;

1、实现一个两栏布局，左侧占30%宽度，右侧占70%宽度

    

        
       
    
    

        
    

2、实现一个两栏布局，左侧固定宽度，右侧根据浏览器宽度进行自适应变化  （float+margin）

效果图如下：

左侧：width=30%,height=75px；float= left

右侧：margin-right: 0px;margin-left: 30%;height: inherit

右侧通过定义margin外边框的与左边距离，与右边的距离，自适应变化

代码如下

2、实现一个两栏布局，左侧固定宽度，右侧根据浏览器宽度进行自适应变化

    

        
    
    

        
    

3、实现一个两栏布局，右侧固定宽度，左侧根据浏览器宽度进行自适应变化  （position）

( 设置了position:absolute要结合right,left,top,bottom使用 )

效果图如下：

最外层的div，即父div要position:relative，这样子div会在父div的范围内定位。子div要设置position:absolute

父div：width=100%；height=75px；position=relative

子div：

      左侧div：height: inherit;position: absolute;right: 30%;top: 0px ;left: 0px;

      右侧div：width: 30%;height: inherit;position: absolute;right: 0px;top: 0px;

代码如下

3、实现一个两栏布局，右侧固定宽度，左侧根据浏览器宽度进行自适应变化

    

        
        
    
    

        
    

4、实现一个三栏布局，左侧固定宽度，右侧固定宽度，中间部分宽度随浏览器宽度变化而自适应变

(flow+position+margin)

（ flow分为 块元素、行内元素 ）

效果图

代码如下

html

4、实现一个三栏布局，左侧固定宽度，右侧固定宽度，中间部分宽度随浏览器宽度变化而自适应变化

    

    

        
    
    

        
    

css

5、实现一个三栏布局，左侧固定宽度，中间固定宽度，右侧根据浏览器宽度变化而自适应变化   ( flexBox )

这个需要你自己去查一下，我对这个属性还不太明白

效果图：

父元素要使用display:flex ; flex-direction：row | column | row-reverse | column-reverse

代码如下：

html

5、实现一个三栏布局，左侧固定宽度，中间固定宽度，右侧根据浏览器宽度变化而自适应变化

    

        
    
    

        
    
    

        
    

css