zoukankan      html  css  js  c++  java
  • 三栏布局的5种解决方案及优缺点

    假设高度已知,请写出三栏布局,左栏、右栏宽度300px,中间宽度自适应。  

     <ul class="layout">
          <li class="left"></li>
          
          <li class="right"></li>
          <li class="middle"></li>
    </ul>

    1. 浮动布局

    <style type="text/css">
    .layout{
        height: 500px;
        border: 1px solid blue;
      }
      .layout>li{
        height: 100%;
      }
      .left{
         300px;
        background-color: green;
        float: left;
      } 
      .middle{  
         background-color: black;
         margin: 0 300px;
      }
      .right{
          300px;
         background-color: green;
         float: right;
      }
    </style>

    注意: 中间内容html部分代码放在最下面

    浮动布局是有局限性的,浮动元素是脱离文档流,要做清除浮动,这个处理不好的话,会带来很多问题,比如高度塌陷等。 
    浮动布局的优点就是比较简单,兼容性也比较好。只要清除浮动做的好,是没有什么问题的。 

    2.绝对定位布局

    .layout{
        margin-top: 1rem;
        height: 500px;
        border: 1px solid blue;
        position: relative;
      }
      .layout>li{
        height: 100%;
        top: 0;
      }
      .left{
         300px;
        background-color: green;
        position: absolute;
        left: 0;
      } 
      .middle{  
         background-color: black;
         /* margin: 0 300px; */
         position: absolute;
         left: 300px;
         right: 300px;
      }
      .right{
          300px;
         background-color: green;
         position: absolute;
         right: 0;
      }
    

      

    绝对定位布局优点,很快捷,设置很方便,而且也不容易出问题,你可以很快的就能想出这种布局方式。 
    缺点就是,绝对定位是脱离文档流的,意味着下面的所有子元素也会脱离文档流,这就导致了这种方法的有效性和可使用性是比较差的。

    3.flex布局

     <ul class="layout">
          <li class="left"></li>
          <li class="middle"></li>
          <li class="right"></li>
    </ul>
    
    .layout{
        display: flex;
        height: 500px;
      }
      .layout>li{
        height: 100%;
      }
      .left{
         300ox;
        background-color: green;
      } 
      .middle{  
         background-color: black;
         flex:1;
      }
      .right{
          300px;
         background-color: green;
      }
    

      

    felxbox布局是css3里新出的一个,它就是为了解决上述两种方式的不足出现的,是比较完美的一个。目前移动端的布局也都是用flexbox。 
    felxbox的缺点就是不能兼容IE8及以下浏览器。

    4.表格布局

     <ul class="layout">
          <li class="left"></li>
          <li class="middle"></li>
          <li class="right"></li>
    </ul>
    .layout{
        display: table;
        height: 500px;
         100%;
      }
      .layout>li{
        height: 100%;
        display: table-cell;
      }
      .left{
         300px;
        background-color: green;
      } 
      .middle{  
         background-color: black;
      }
      .right{
          300px;
         background-color: green;
      }
    

      表格布局在历史上遭到很多人的摒弃,说表格布局麻烦,操作比较繁琐,其实这是一种误解,在很多场景中,表格布局还是很适用的,比如这个三栏布局,用表格布局就轻易写出来了。还有表格布局的兼容性很好,在flex布局不兼容的时候,可以尝试表格布局。 
    表格布局也是有缺陷的,当其中一个单元格高度超出的时候,两侧的单元格也是会跟着一起变高的,而有时候这种效果不是我们想要的。

    5.网格布局

     <ul class="layout">
          <li class="left"></li>
          <li class="middle"></li>
          <li class="right"></li>
    </ul>
    
       .layout{
        100%;
        display: grid;
        grid-template-rows: 500px;
        grid-template-columns: 300px auto 300px;
      }
      .layout>li{
        
      }
      .left{
         300px;
        background-color: green;
      } 
      .middle{  
         background-color: black;
      }
      .right{
          300px;
         background-color: green;
      }
    

      

    网格布局也是新出的一种布局方式

     
  • 相关阅读:
    Android 百度地图开发(一)--- 申请API Key和在项目中显示百度地图
    Session,Cookie,jsessionid,Url重写
    PHP输出当前进程所有变量 / 常量 / 模块 / 函数 / 类
    table自适应宽度
    python学习笔记1(字符串操作)
    jquery-select选中
    dos命令大全
    dos命令之创建文件,文件夹
    PHP中逻辑运算符的高效用法---&&和||
    apache vhost
  • 原文地址:https://www.cnblogs.com/weblff/p/9685282.html
Copyright © 2011-2022 走看看