多列布局方案整理

Euphoria 发布于2019-08-30 12:48 / 1924人阅读

摘要：了解中属性的值及其特性，透彻分析问题和需求才可以选择和设计最适合的布局解决方案。多列布局在网页中非常常见例如两列布局，多列布局可以是两列定宽，一列自适应，或者多列不定宽一列自适应还有等分布局等。

了解 CSS 中属性的值及其特性，透彻分析问题和需求才可以选择和设计最适合的布局解决方案。

多列布局在网页中非常常见（例如两列布局），多列布局可以是两列定宽，一列自适应，或者多列不定宽一列自适应还有等分布局等。

定宽-自适应

有如下布局


  
    left
  
  
    right
    right

float+margin

  .left {
    float: left;
    width: 100px;
  }
  .right {
    margin-left: 100px
    /*间距可再加入 margin-left */
  }

优点：容易理解
缺点：IE6中会有3像素的BUG，解决方法可以在.left 加入 margin-left:-3px。
因为left是浮动元素，right是没有浮动的，如果right内容中有清楚浮动就会产生bug。

改进：float + margin + (fix)


  
    left
  
    /*外层在包裹一个容器*/
  
    
      right
      right

兼容性很好，适用于多版本浏览器（包括 IE6）但是多了层right-fix的结构。但left不可选择，被right-fix盖住。需要设置left的 position: relative;来提高层级。

float+overflow

 .left{ 
       float: left;
       width: 100px;
       margin-right: 20px;
  }
  .right{ overflow: hidden; //触发BFC }

overflow:hidden使得div产生了BFC 模式（Block Formatting Context）块级格式化文本，根据BFC的布局规则之一，div那个产生的BFC区域不会与左边浮动的元素所重叠。具体什么是BFC可以看看这篇文章

table

 .parent {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  .left {
    display: table-cell;
    width: 100px;
  }
  .right {
    display: table-cell;
    /*宽度为剩余宽度*/
  }

table 的显示特性为每列的单元格宽度合一定等与表格宽度。 table-layout: fixed; 可加速渲染，也是设定布局优先。

table-cell 中不可以设置 margin 但是可以通过 padding 来设置间距。

flex

 .parent{ 
      display: flex ; 
  }
 .left { 
       width: 100px;
       margin-right: 20px;
  }
  .right{
        /*等价于flex:1 1 0; 增长因子和收缩因子都为1，
         基础宽度为0,那么剩余宽度都分配给right*/
        flex: 1 ; 
    }

flex-item 默认为内容宽度。
缺点： CSS3 兼容性。根据内容判断，性能会有问题，做小范围布局，不适合大范围布局。

不定宽-自适应

float + overflow

  .left{ 
       float: left;
       width: 200px;
       margin-right: 20px;
  }
  .right{ overflow: hidden; //触发BFC }

table

 .parent{ 
      display:table; 
      width: 100%;
  }
 .left, .right { 
       display: table-cell;
  }
  .left{ 
       width:0.1%;  //写的够小就行，不写1px的原因是IE8会有问题
       padding-right:20px; 
   }
  .left p{ width : 200px;}  //用内部元素撑开，宽度可以不定

flex

.parent{display:flex;}
.left{margin-right:20px;}
.right{flex:1;}

三列不定宽 + 自适应与两列的做法一样

等分布局

每一列的宽度和间距均相等。
有如下HTML结构

float

 .parent{
    margin-left ：-20px; //为父元素增加20px宽度
    }
 .column{
       float : left;
       width: 25%;
       padding-left : 20px;
       box-sizing : border-box;
      }

缺点：结构和样式稍微有点耦合性

table

 .parent-fix{  margin-left ：-20px; //为父元素增加20px宽度 }
 .parent{ 
      display : table;
      width : 100%;
      table-layout : fixed;
  }     
  .column{
       float : left;
       width: 25%;
       padding-left : 20px;
       box-sizing : border-box;
  }

fix

 .parent{ 
      display : flex;
  }     
  .column{
      flex: 1;
  }
  .column+.column{  margin-left: 20px;  } //选择2，3，4

等高需求 table

上面自适应的table布局就具有登高的布局

flex

如上面自适应的例子，flex 天然等高

float

 .parent{  overflow : hidden; }
 .left, .right{
       padding-bottom : 9999px;
       margin-bottom : -9999px;
  }

优点是兼容性比较好
缺点是伪等高不是正真意义上的登高

GPU云服务器云服务器大数据收集整理方案数据整理及存储方案 idc机房布局方案多列数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115071.html

多列布局方案整理

摘要：了解中属性的值及其特性，透彻分析问题和需求才可以选择和设计最适合的布局解决方案。多列布局在网页中非常常见例如两列布局，多列布局可以是两列定宽，一列自适应，或者多列不定宽一列自适应还有等分布局等。了解 CSS 中属性的值及其特性，透彻分析问题和需求才可以选择和设计最适合的布局解决方案。多列布局在网页中非常常见（例如两列布局），多列布局可以是两列定宽，一列自适应，或者多列不定宽一列...

Taste 2019-08-01 15:06 评论0 收藏0
【整理】CSS布局方案

摘要：无名布局自己瞎搞的，简单的绝对定位即可解决问题，为啥还要搞什么圣杯和双飞翼如果你觉得此文对你有一定的帮助，可以点击下方的喜欢收藏备用 showImg(https://segmentfault.com/img/remote/1460000010989115); 我们在日常开发中经常遇到布局问题，下面罗列几种常用的css布局方案话不多说，上代码！以下所有demo的源码github：htt...

Winer 2019-08-29 13:20 评论0 收藏0
前端面试重点之——多列布局

摘要：重点以需求为例说明。三左边不定宽，右边自适应布局需求左侧不定宽，右侧自适应，间距。五等宽布局解决方案需求多列等宽，并保留间距。在页面开发中，当我们拿到设计师给出的UI图后，首先考虑的就是布局问题，而多列布局会是我们碰到最多的布局问题，个人就汇总了开发中常见多列布局问题的解决方法。按列数可以分为两列布局，三列布局，多列布局，其中布局方法中的原理都有类似之处。目录一、定宽+...

lei___ 2019-08-02 15:33 评论0 收藏0
前端面试重点之——多列布局

摘要：重点以需求为例说明。三左边不定宽，右边自适应布局需求左侧不定宽，右侧自适应，间距。五等宽布局解决方案需求多列等宽，并保留间距。在页面开发中，当我们拿到设计师给出的UI图后，首先考虑的就是布局问题，而多列布局会是我们碰到最多的布局问题，个人就汇总了开发中常见多列布局问题的解决方法。按列数可以分为两列布局，三列布局，多列布局，其中布局方法中的原理都有类似之处。目录一、定宽+...

superPershing 2019-08-23 18:40 评论0 收藏0
前端面试重点之——多列布局

摘要：重点以需求为例说明。三左边不定宽，右边自适应布局需求左侧不定宽，右侧自适应，间距。五等宽布局解决方案需求多列等宽，并保留间距。在页面开发中，当我们拿到设计师给出的UI图后，首先考虑的就是布局问题，而多列布局会是我们碰到最多的布局问题，个人就汇总了开发中常见多列布局问题的解决方法。按列数可以分为两列布局，三列布局，多列布局，其中布局方法中的原理都有类似之处。目录一、定宽+...

makeFoxPlay 2019-08-30 11:25 评论0 收藏0