三栏式布局(上)

　　设置一个三栏式布局，要求：左右宽度固定，中间自适应占满剩余空间，并且随屏幕调整大小。父元素的高度取决于三列最高高度(效果图如上)；

     第一次尝试：

.container{
  background-color: #eee;
  position:relative;
  overflow: auto;
}

.left{
  width:200px;
}
.content{
  position: absolute;
  top:20px;
  left:240px;
}
.right{
  position: absolute;
  top:20px;
  right:20px;
  width:120px;
}

 

 出现的问题：1.父元素高度并不是三列最高，而是自动加了滚动条。2.中间content并没有填满剩余空间，而且不随窗口伸缩！

  原因如下：right是最高栏，但是它脱离了文档流，父元素container设置了overflow:auto，所以溢出的部分出现在滚动条以下。

                content设置了absolute定位，所以它的宽度由实际内容而定，不会自适应。

 

第二次尝试：

.container{
    background-color: #eee;
    position:relative;
    overflow: auto;
}

.left{
   float:left;
    width:200px;
}

.content{
  //这个属性可以自动居中满屏，但是当设置display:inline-block时就无效了~
    margin:0 auto;
    max-width: 550px;
}
.right{
   position: absolute;
   width:120px;
   top:20px;
   right:20px;
}

出现的问题：1.满屏时显示满足  2.当窗口缩小时，content会包围left,并且会被right部分发生重叠！

原因如下：1.left设置了float属性，所以会被content包围；

              2.right设置了固定宽度，并且脱离文档流，所以窗口缩小时会浮在right上层。

具体实现见（下）

转载于:https://www.cnblogs.com/summer323/p/5305349.html