多列布局之等分布局

     在实际网页布局中，我们可能会需要设置等分布局。

<div class="parent">
     <div class="column"><p>1</p></div>
     <div class="column"><p>2</p></div>
     <div class="column"><p>3</p></div>
     <div class="column"><p>4</p></div>
 </div>   

 

    可以采用以下办法：

方案1：float

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

   缺点：1.如果等分分数不一样的话，需要重新设置。

            2.ie67对百分比浮点数直接四舍五入。

方案2：table

    改造HTML：

<div class="parent-fix">
     <div class="parent">
         <div class="column"><p>1</p></div>
         <div class="column"><p>2</p></div>
         <div class="column"><p>3</p></div>
         <div class="column"><p>4</p></div>
     </div>  
 </div> 

css：

.parent-fix{
        margin-left:-20px;          //补充宽度
    }
    .parent{
        display:table;
        width:100%;
        table-layout:fixed;
    }
    .column{
        display:table-cell;
        padding-left:20px;
    }

方案3：flex

   .parent{
        display:flex;
    }
    .column{
        flex:1;                //分margin后的剩余空间
    }
    .column+.column{           //除了第一个column元素外的后几个column元素
        margin-left:20px;
    }

  缺点：兼容性问题

总结：选择器特性及兼容性

选择器相关知识：http://www.w3school.com.cn/cssref/css_selectors.asp

附加等高布局：

   方案1:将left、right设为table元素；

   方案2：flex的align-items的默认值是stretch

   方案3：float(伪等高)  兼容性较好

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

 

转载于:https://www.cnblogs.com/july-Vivian/p/4614851.html