常见的两列、三列布局，宽高自适应_html/css_WEB-ITnose

今天是猴年的第一天班，也是新的起点。分享一个如何用css实现我们在工作中常见的两列布局：1.左侧固定宽度，高度自适应右侧；2.左侧宽度高度固定，右侧自适应宽高；3.左侧、右侧固定宽，中间自适应。

1.左侧固定宽度，高度自适应右侧

• 效果图

pic1.png

pic2.png

• html+css

      
  left
      
  right
  

  你看代码，左侧确实没有定高，右侧也没有定宽。

2.左侧宽度高度固定，右侧自适应宽高

• 效果图

pic3.png

• html+css

       
  left
       
  right
   

  你看代码，左侧确实定了宽高，右侧宽高都没有定。

3.左侧、右侧固定宽，中间自适应

• 效果图

pic4.png

pic5.png

• html+css

        
            
                center          
        
        
  left
        
  right
    

  你看代码，左侧、右侧都固定了宽度，中间宽度自适应了。关键点是：float:left配合margin-left使用。同时center的div写在了左右的前面，更加符合语义化。

但我们这里高度是写死的，如何实现既保持“左右固定宽，中间自适应”，又能够以一边的高度为基准，其他两个高度自适应呢？ 你可以参考1,2的代码来实现，这里就不写了。