考拉多列布局 设计思路详细过程

下图来自考拉海购网 ： www.kaola.com/ 上图这种布局的设计思路 上图这种布局的设计思路

第一步： 写出大概结构

.box {
    width: 500px;
    height: 500px;
    background-color: orange;
}
.item {
    width: 100px;
    height: 100px;
    background-color: skyblue;

    /* 浮动 */
    float:left;
}
//body部分
 <div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>

第二步： 给item 添加 border： 1px，此时盒子5绝对会溢出到下一行 --> 因为(100+2）*5 > 500

第三步：让盒子5与其他盒子在同一行排列

通过给item设置 box-sizing ： border-box 不去撑大盒子的宽度

那么两个盒子之间的边框宽度为2px，得让它变成1px

第四步：margin-left： -1px

第五步： 5个item盒子的宽度加 1px

.item {
     width: 101px;
 }

但这样 会多出1px ，如效果图分析：

那么怎么处理溢出的1px ？？？

可以将1盒子的宽度减一，此时依然会溢出1px，但此时5个盒子的总宽度为500px

那么此时就需要将盒子整体向右移1px，可设置1盒子的margin-left : 0;

 
.item.first {
    width: 100px;
    margin-left: 0;
}
//给1盒子添加first属性值
<div class="item first">1</div>

效果如下：

可以再增强一下它的复用性

//style 添加样式
.box .top {
    margin-top: -1px; //层叠掉上一行盒子的border-bottom
}

//body添加如下代码 复制3次
<div class="item first top">1</div>
<div class="item top">2</div>
<div class="item top">3</div>
<div class="item top">4</div>
<div class="item top">5</div>

最终版：

   // style部分
   .box {
        width: 500px;
        height: 500px;
        background-color: orange;

    }
    .item {
        width: 101px;
        height: 100px;
        background-color: skyblue;
        float: left;
        border: 1px solid #000;
        box-sizing: border-box;/*设置这步 此时五个盒子刚好占满box*/
        /* 下面开始消除中间的边框，只让其为1px */
        margin-left: -1px;
        /*设置这步 此时第一个盒子向左溢出1px，可以当做是每个盒子的左边框1px都和上个盒子层叠了*/
        /*那不就相当于这几个盒子的宽都少了1px 所以给每个盒子的宽都加上1px 设置为 (100 + 1)px */
    }
    .item.first {
        width: 100px;
        margin-left: 0;
    }
    
    .box .top {
        margin-top: -1px;
    }
    // body部分
    <div class="box">
    <div class="item first">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item first top">1</div>
    <div class="item top">2</div>
    <div class="item top">3</div>
    <div class="item top">4</div>
    <div class="item top">5</div>

总结：

对于这种带边框的多列布局，思考以下两个问题：

1. 边框给谁加
2. 加上边框后，宽度如何计算

以上只是设计思路，可根据需求调整宽高，加入背景图...