资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/多列布局方案整理

多列布局方案整理

Taste / 2073人阅读

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

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

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

定宽-自适应

有如下布局

</>复制代码 
  2.   
  3.     
    left
  4.   
  5.   
  6.     
    right
  7.     
    right
  8.
float+margin 
</>复制代码 
  1.   .left {
  2.     float: left;
  3.     width: 100px;
  4.   }
  5.   .right {
  6.     margin-left: 100px
  7.     /*间距可再加入 margin-left */
  8.   }

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

改进：float + margin + (fix) 
</>复制代码 
  2.   
  3.     
    left
  4.   
  5.     /*外层在包裹一个容器*/
  6.   
  7.     
  8.       
    right
  9.       
    right
  10.     
  11.

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

float+overflow 
</>复制代码 
  1.  .left{ 
  2.        float: left;
  3.        width: 100px;
  4.        margin-right: 20px;
  5.   }
  6.   .right{ overflow: hidden; //触发BFC }

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

table 
</>复制代码 
  1.  .parent {
  2.     display: table;
  3.     width: 100%;
  4.     table-layout: fixed;
  5.   }
  6.   .left {
  7.     display: table-cell;
  8.     width: 100px;
  9.   }
  10.   .right {
  11.     display: table-cell;
  12.     /*宽度为剩余宽度*/
  13.   }

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

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

flex 
</>复制代码 
  1.  .parent{ 
  2.       display: flex ; 
  3.   }
  4.  .left { 
  5.        width: 100px;
  6.        margin-right: 20px;
  7.   }
  8.   .right{
  9.         /*等价于flex:1 1 0; 增长因子和收缩因子都为1，
  10.          基础宽度为0,那么剩余宽度都分配给right*/
  11.         flex: 1 ; 
  12.     }

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

不定宽-自适应

float + overflow 
</>复制代码 
  1.   .left{ 
  2.        float: left;
  3.        width: 200px;
  4.        margin-right: 20px;
  5.   }
  6.   .right{ overflow: hidden; //触发BFC }
table 
</>复制代码 
  1.  .parent{ 
  2.       display:table; 
  3.       width: 100%;
  4.   }
  5.  .left, .right { 
  6.        display: table-cell;
  7.   }
  8.   .left{ 
  9.        width:0.1%;  //写的够小就行，不写1px的原因是IE8会有问题
  10.        padding-right:20px; 
  11.    }
  12.   .left p{ width : 200px;}  //用内部元素撑开，宽度可以不定
flex 
</>复制代码 
  1. .parent{display:flex;}
  2. .left{margin-right:20px;}
  3. .right{flex:1;}

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

等分布局

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

</>复制代码 
  2.     
    1
  3.     
    2
  4.     
    3
  5.     
    4
float 
</>复制代码 
  1.  .parent{
  2.     margin-left ：-20px; //为父元素增加20px宽度
  3.     }
  4.  .column{
  5.        float : left;
  6.        width: 25%;
  7.        padding-left : 20px;
  8.        box-sizing : border-box;
  9.       }


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

table 
</>复制代码 
  1.  .parent-fix{  margin-left ：-20px; //为父元素增加20px宽度 }
  2.  .parent{ 
  3.       display : table;
  4.       width : 100%;
  5.       table-layout : fixed;
  6.   }     
  7.   .column{
  8.        float : left;
  9.        width: 25%;
  10.        padding-left : 20px;
  11.        box-sizing : border-box;
  12.   }
fix 
</>复制代码 
  1.  .parent{ 
  2.       display : flex;
  3.   }     
  4.   .column{
  5.       flex: 1;
  6.   }
  7.   .column+.column{  margin-left: 20px;  } //选择2，3，4
等高需求 table

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

flex

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

float 
</>复制代码 
  1.  .parent{  overflow : hidden; }
  2.  .left, .right{
  3.        padding-bottom : 9999px;
  4.        margin-bottom : -9999px;
  5.   }

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

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

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

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

相关文章

  • 多列布局方案整理

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

    Euphoria 评论0 收藏0

  • 【整理】CSS布局方案

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

    Winer 评论0 收藏0

  • 前端面试重点之——多列布局

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

    lei___ 评论0 收藏0

  • 前端面试重点之——多列布局

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

    superPershing 评论0 收藏0

  • 前端面试重点之——多列布局

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

    makeFoxPlay 评论0 收藏0

发表评论

登陆后可评论

0条评论

Taste

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<