设置一个三栏式布局,要求:左右宽度固定,中间自适应占满剩余空间,并且随屏幕调整大小。父元素的高度取决于三列最高高度(效果图如上);
第一次尝试:
.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上层。
具体实现见(下)