CSS3 | 超简单的CSS3多列布局

Posted 酷学编程

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS3 | 超简单的CSS3多列布局相关的知识,希望对你有一定的参考价值。



CSS3 | 超简单的CSS3多列布局
CSS3 | 超简单的CSS3多列布局


前端布局非常重要的一环就是页面框架的搭建,这也是最基础的一环。


当一行文字太长时,读者读起来就比较费劲,有可能读错行或读串行;当出现这样的情况出现,是很容易让人产生烦躁的情绪,从而读不下去。


所以,为了最大效率的使用大屏幕显示器,页面设计中需要限制文本的宽度,让文本按多列呈现,就像报纸上的新闻排版一样。


今天的文章,我们就来学习一下CSS3中多列布局吧~



定宽+自适应



使用float+overflow


(1)原理、用法

  • 原理:通过将左边框脱离文本流,设置右边规定当内容溢出元素框时发生的事情以达到多列布局。

  • 用法:先将左框设置为float:left、width、margin-left,再设置实际的右框overflow:hidden。

(2)代码实例

<div class="parent">

    <div class="left">

        <p>left</p>

    </div>

    <div class="right">

        <p>right</p>

        <p>right</p>

    </div>

</div>

.left {

    float:left;

    width:100px;

    margin-right:20px;

}

.right {

    overflow:hidden;

}

(3)优缺点

  • 优点:简单

  • 缺点:不支持ie6


使用float+margin


(1)原理、用法

  • 原理:通过将左框脱离文本流,加上右框向右移动一定的距离,以达到视觉上的多列布局。

  • 用法:先将左框设置为float:left、margin-left,再设置右框margin-left。

(2)代码实例

<div class="parent">

    <div class="left">

        <p>left</p>

    </div>

    <div class="right">

        <p>right</p>

        <p>right</p>

    </div>

</div>

.left {

    float:left;

    width:100px;

}

.right {

    margin-left:120px;

}

(3)优缺点

  • 优点:简单,易理解

  • 缺点:兼容性存在一定问题,ie6下有3px的bug。right下的p清除浮动将产生bug


使用float+margin(改良版)


(1)原理、用法

  • 原理:在1)的基础之上,通过向右框添加一个父框,再加上设置左、右父框属性使之产生BFC以去除bug。

  • 用法:先将左框设置为float:left、margin-left、position:relative,再设置右父框float:right、width:100%、margin-left,最后设置实际的右框margin-left。

(2)代码实例

<div class="parent">

    <div class="left">

        <p>left</p>

    </div>

    <div class="rigth-fix">

        <div class="right">

            <p>right</p>

            <p>right</p>

        </div>

    </div>

</div>


.left {

    float:left;

    width:100px;

    position:relative;

}

.right-fix {

    float:right;

    width:100%;

    margin-left:-100px;

}

.right {

    margin-left:120px;

}

(3)优缺点

  • 优点:简单,易理解



使用table 


(1)原理、用法

  • 原理:通过将父框设置为表格,将左右边框转化为类似于同一行的td,从而达到多列布局。

  • 用法:先将父框设置为display:table、width:100%、table-layout:fixed,再设置左右框display:table-cell,最后设置左框width、padding-right。

(2)代码实例

<div class="parent">

    <div class="left">

        <p>left</p>

    </div>

    <div class="right">

        <p>right</p>

        <p>right</p>

    </div>

</div>

.parent {

    display:table;

    width:100%;

    table-layout:fixed;

}

.left {

    width:100px;

    padding-right:20px;

}

.right,.left {

    display:table-cell;    

}


使用flex


(1)原理、用法

  • 原理:通过设置CSS3布局利器flex中的flex属性以达到多列布局。

  • 用法:先将父框设置为display:flex,再设置左框flex:1,最后设置左框width、margin-right。


(2)代码实例

<div class="parent">

    <div class="left">

        <p>left</p>

    </div>

    <div class="right">

        <p>right</p>

        <p>right</p>

    </div>

</div>

.parent {

    display:flex;

}

.left {

    width:100px;

    margin-right:20px;

}

.right {

    flex:1;

}


.parent {

    display:flex;

}

.left {

    width:100px;

    margin-right:20px;

}

.right {

    flex:1;

}

(3)优缺点

  • 优点:flex很强大

  • 缺点:兼容性存在一定问题,性能存在一定问题



两列定宽+一列自适应


(1)原理、用法

  • 原理:这种情况与两列定宽查不多。

  • 用法:先将左、中框设置为float:left、width、margin-right,再设置右框overflow:hidden。

(2)代码实例

<div class="parent">

    <div class="left">

        <p>left</p>

    </div>

    <div class="center">

        <p>center</p>

    </div>

    <div class="right">

        <p>right</p>

        <p>right</p>

    </div>

</div>

<div class="parent">

    <div class="left">

        <p>left</p>

    </div>

    <div class="center">

        <p>center</p>

    </div>

    <div class="right">

        <p>right</p>

        <p>right</p>

    </div>

</div>



 不定宽+自适应 


 


使用float+overflow


    (1)原理、用法

  • 原理:这种情况与两列定宽查不多。

  • 用法:先将左框设置为float:left、margin-right,再设置右框overflow: hidden,最后设置左框中的内容width。

(2)代码实例

<div class="parent">

    <div class="left">

        <p>left</p>

    </div>

    <div class="right">

        <p>right</p>

        <p>right</p>

    </div>

</div>

.left{

        float: left;

        margin-right: 20px;

    }

.right{

    overflow: hidden;

}

.left p{

    width: 200px;

}

(3)优缺点

  • 优点:简单

  • 缺点:ie6下兼容性存在一定问题

 使用table


(1)原理、用法

  • 原理:通过将父框改变为表格,将左右框转换为类似于同一行的td以达到多列布局,设置父框宽度100%,给左框子元素一个固定宽度从而达到自适应。

  • 用法:先将父框设置为display: table、width: 100%,再设置左、右框display: table-cell,最后设置左框width: 0.1%、padding-right以及左框中的内容width。

(2)代码实例

<div class="parent">

    <div class="left">

        <p>left</p>

    </div>

    <div class="right">

        <p>right</p>

        <p>right</p>

    </div>

</div>

.parent{

    display: table; width: 100%;

    }

.left,.right{

    display: table-cell;

}

.left{

    width: 0.1%;

    padding-right: 20px;

}

.left p{

    width:200px;

}


(3)优缺点

  • 缺点:ie6 ie7不支持

使用flex


(1)原理、用法

  • 原理:通过设置CSS3布局利器flex中的flex属性以达到多列布局,加上给左框中的内容定宽、给右框设置flex达到不定款+自适应。

  • 用法:先将父框设置为display:flex,再设置右框flex:1,最后设置左框margin-right:20px、左框中的内容width。

(2)代码实例

<div class="parent">

    <div class="left">

        <p>left</p>

    </div>

    <div class="right">

        <p>right</p>

        <p>right</p>

    </div>

</div>

.parent {

    display:flex;

}

.left {

    margin-right:20px;

}

.right {

    flex:1;

}

.left p{

    width: 200px;

}


(3)优缺点

  • 优点:flex很强大

  • 缺点:兼容性存在一定问题,性能存在一定问题



 两列不定宽+一列自适应 


 


(1)原理、用法

  • 原理:这个情况与一列不定宽+一列自适应查不多。

  • 用法:先将左、中框设置为float:left、margin-right,再设置右框overflow:hidden,最后给左中框中的内容设置width。

(2)代码实例

<div class="parent">

    <div class="left">

        <p>left</p>

    </div>

    <div class="center">

        <p>center</p>

    </div>

    <div class="right">

        <p>right</p>

        <p>right</p>

    </div>

</div>

.left,.center{

    float: left;

    margin-right: 20px;

}

.right{

    overflow: hidden;

}

.left p,.center p{

    width: 100px;

}


 CSS3 | 超简单的CSS3多列布局


我们的文章到这里就结束了~ 如果你还有其它的疑问欢迎在我们的文章下方留言哦!


-END-


CSS3 | 超简单的CSS3多列布局



观看更加系统化的直播课程

领取更多前端相关开发资料

可以扫描下方二维码

加苏莱小姐姐的微信即可领取

以上是关于CSS3 | 超简单的CSS3多列布局的主要内容,如果未能解决你的问题,请参考以下文章

css3多列布局

CSS传统布局效果CSS3多列布局CSS3弹性伸缩布局

CSS3之多列布局

CSS3 多列布局:如何设置特定列的样式

十天精通CSS3(10)

css之dispaly:flex;多行多列