Div 切幾等份的處理

by ken tsai

HTML

<div class="row-setting-box">
                            <div class="row-setting-box-column"  style="padding-left:20px;">
                                <div style="width: 200px" class="row-setting-box-frame">1</div>
                            </div>
                        </div>

                        <div class="row-setting-box">
                            <div class="row-setting-box-column" style="padding-left:20px;">
                                <div style="width:100px;" class="row-setting-box-frame">1</div>
                                <div style="width:100px;" class="row-setting-box-frame">2</div>
                            </div>
                        </div>

                        <div class="row-setting-box">
                            <div class="row-setting-box-column" style="padding-left:15px;">
                                <div style="width:66.6px;" class="row-setting-box-frame">1</div>
                                <div style="width:66.6px;" class="row-setting-box-frame">2</div>
                                <div style="width:66.6px;" class="row-setting-box-frame">3</div>
                            </div>
                        </div>

                        <div class="row-setting-box">
                            <div class="row-setting-box-column" style="padding-left:12px;">
                                <div style="width:50px;" class="row-setting-box-frame">1</div>
                                <div style="width:50px;" class="row-setting-box-frame">2</div>
                                <div style="width:50px;" class="row-setting-box-frame">3</div>
                                <div style="width:50px;" class="row-setting-box-frame">4</div>
                            </div>
                        </div>

                        <div class="row-setting-box">
                            <div class="row-setting-box-column" style="padding-left:4px;">
                                <div style="width:25px;"...

CSS

.row-setting-box{
    margin: 0 auto;
    position: relative;
    display: inline-block;
    width: 250px;
    /*border: 1px solid #000;*/
}

/*.row-setting-box div{*/
.row-setting-box-column{
    overflow: hidden;
    text-align: center;
    margin: 0 auto;
    width: 220px;
}

.row-setting-box-column:hover{
    cursor: pointer;
    /*    background-color:  #d3d3d3; */
    border: 2px solid #00a65a;
}

.row-setting-box-column-active{
    border: 2px solid #d3d3d3;
}

.row-setting-box-frame{
    height: 200px;
    line-height: 200px;
    float: left;
    text-align: center; 
    vertical-align: middle; 
    border: 1px solid #a4a4a4;
    background-color:  #c5dbec;
    overflow: hidden;
}