1. 程式人生 > >使用多個div 實現田字格佈局

使用多個div 實現田字格佈局

使用多個div實現類似田字格的佈局方式,


HTML部分

<div class="div-c">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

CSS部分

.div-c{
            width:200px;
            height:200px;
            border-top:1px solid red;
            border-left:1px solid red;
            margin:20px;
        }
        .div-c div{
            width:25%;
            height:25%;
            float:left;
            border-bottom: 1px solid red;
            border-right: 1px solid red;
            box-sizing: border-box;

        }