zoukankan      html  css  js  c++  java
  • 三栏式布局(上)

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

         第一次尝试:

    .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上层。

    具体实现见(下)

  • 相关阅读:
    运输装备(codevs 1669)
    考前复习(codevs 2837)
    2014编程之美初赛第一场
    51系列小型操作系统精髓 简单实现
    数学----有趣的扑克牌《一》
    hadoop编程:分析CSDN注冊邮箱分布情况
    [动态规划]UVA437
    Swift学习笔记四:数组和字典
    [动态规划]UVA10285
    freemarker中的left_pad和right_pad
  • 原文地址:https://www.cnblogs.com/summer323/p/5305349.html
Copyright © 2011-2022 走看看