码迷,mamicode.com
首页 > 其他好文 > 详细

两\多列布局优劣与选择

时间:2015-12-28 18:44:29      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:布局

  • 浮动

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>浮动布局</title>
        <style>
        .box{
           overflow: hidden;
        }
        .box1 {
            float: left;
            background: red;
            width: 20%;
            height: 80px;
        }
        .box2 {
            float: right;
            background: blue;
            width: 80%;
           height: 180px;
        }
        </style>
    </head>
    
    <body>
        <div class="box">
            <div class="box1"></div>
            <div class="box2"></div>
        </div>
    </body>
    </html>

    效果:技术分享

    代码量少,能够轻松实现多列布局(父元素高度坍塌那都不叫事)。但是,无法实现各列高度自适应,设置多列宽度后,剩下一列宽度无法自适应,而且浮动原本不是用来布局的,他是用来实现文字环绕图片来着。而且无法通过父元素设置text-align:center,使得子元素居中显示,浮动是紧贴顶部的。无法设置vertical属性进行设置垂直对其方式。

    使用场景:早期布局神器,但是很多地方需要设置绝对值,导致无法自适应,或者在设置百分比的时候容易导致布局错乱

    案例:w3c官方文档

  • 绝对定位

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>绝对定位布局</title>
        <link rel="stylesheet" href="css/install.css">
        <style>
        .box {
            position: relative;
        }
        
        .box1 {
            background: red;
            width: 20%;
            height: 80px;
        }
        
        .box2 {
            position: absolute;
            display: inline-block;
            background: blue;
            width: 80%;
            height: 180px;
            top: 0px;
            left: 20%;
        }
        </style>
    </head>
    
    <body>
        <div class="box">
            <div class="box1"></div>
            <div class="box2"></div>
        </div>
    </body>
    </html>

    效果:技术分享

    高宽都不能自适应,而且position具有破坏性,脱离了文档流,具有遮罩特性。一般用作弹出层。京东、淘宝、天猫首页商品都有使用,一般不用来布局

  • display:inline-block

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>display:inline-block</title>
        <link rel="stylesheet" href="css/install.css">
        <style>
        .box{
           overflow: hidden;
           font-size: 0px;
        }
        .box1 {
            display: inline-block;
            background: red;
            width: 20%;
            height: 80px;
            font-size: 20px;
            text-align: center;
            vertical-align: top;
        }
        .box2 {
            display: inline-block;
            background: blue;
            width: 80%;
            height: 180px;
            font-size: 20px;
            text-align: center;
            vertical-align: top;
        }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="box1">box1</div>
            <div class="box2">box2</div>
        </div>
    </body>
    </html>

    效果:技术分享

    没有浮动的烦恼,可以设置各列垂直水平对其,inline-block元素之间有html空白,而且inline-block元素沿着默认的基线对齐,会出现在各种奇形怪状的高度,可以通过vertical-align或者line-height进行设置

  • display:table-cell

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>绝对定位布局</title>
        <link rel="stylesheet" href="css/install.css">
        <style>
        .box {
            display: table;
            table-layout: fixed;
            width: 100%;
            text-align: center;
        }
        
        .box>div {
            display: table-cell;
        }
        
        .box1 {
            background: red;
            vertical-align: middle;
        }
        
        .box2 {
            background: blue;
            vertical-align: middle;
        }
        
        .box3 {
            background: yellow;
            vertical-align: middle;
        }
        </style>
    </head>
    
    <body>
        <div class="box">
            <div class="box1">
                <p>box1</p>
                <p>box1</p>
            </div>
            <div class="box2">
                box2
            </div>
            <div class="box3">
               box3
            </div>
        </div>
    </body>
    </html>

    效果:技术分享

    inline-block的升级版,不需要清除各列之间的空白间隙,各列宽度可以根据外边框自适应都能做到可控

  • display:flex

    未完待续..................

本文出自 “子莫首” 博客,请务必保留此出处http://zimoushou.blog.51cto.com/4306790/1729213

两\多列布局优劣与选择

标签:布局

原文地址:http://zimoushou.blog.51cto.com/4306790/1729213

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!