CSS两栏布局详解-优快云博客

一、CSS两栏布局

CSS两栏布局指的是在一个容器（container）中，其中一侧定宽布局，而另一侧自适应，自动填满剩余的空间。“左侧定宽，右侧自适应”

二、布局方式

1.position布局

HTML代码

<body>
  <div class="left"></div>  
  <div class="right"></div>
</body>

CSS代码

.left{
    width: 200px;
    height: 100px;
    background-color:blue; 
}
.right{
    height: 100px;    
    position: absolute;    
    top: 0;    
    left: 200px;    
    right: 0;    
    bottom:0;    
    background-color:red;
}

该布局方式不灵活，需要手动计算和修改定位边的距离。
如果定宽部分设置了margin、padding、border，则另一侧也需要做相应更改，维护起来比较麻烦。

2.float布局

HTML代码

<body>
  <div class="left"></div>  
  <div class="right"></div>
</body>

CSS代码

.left{
    width: 200px;    
    height: 100px;    
    float: left;    
    background-color:blue;
}
.right{
    height: 100px;    
    background-color:red;
}

该布局方式更简洁，将左侧设置为浮动布局，右侧元素自然就跟随着浮动了，根据需要，可以在右侧元素后清除浮动（实际上，在此种方式下，不用设置清除浮动，该布局为流式布局）。

.right::after{
      content:"";      
      clear: both;
}

3.flex布局

HTML代码

<div class="container">
   <div class="left"></div>
   <div class="right"></div>
</div>

CSS代码

.container{
    width: 100%;    
    height: 100px;    
    display: flex;/*设置布局方式为flex布局，一定要在父元素上设置*/}
.left{
    flex-basis:200px;/*定宽*/    
    background-color:blue;
}
.right{
    flex:auto;/*自动填满*/    
    background-color:red;
}

flex布局应该是最灵活、最方便的响应式布局方式了，但必须要IE9以上的浏览器才支持该布局方式。

4.grid布局

HTML代码

<div class="container">
   <div class="left"></div>   
   <div class="right"></div>
</div>

CSS代码

.container{
    width: 100%;    
    height: 100px;    
    display: grid;/*设置为grid布局*/    
    grid-template-columns:200px auto;/*设置每一列的宽度*/ 
}
.left{
    background-color:blue; 
} 
.right{
     background-color:red;
}