html - 当我将她移到顶部时，我的 div 的一部分被隐藏了

Question

问题是，当我尝试移动第二行中的 3 个框时，它们会移动到第一行 div 的下面，这里是代码:

http://jsfiddle.net/hvvdvqdt/

HTML:

 <!-- first row  -->
        <secction class="rowOne">

            <div class="col ">
                <div class="block hours">
                    8h00
                </div>  
            </div>      

        <div class="col ">
            <div class="block hours noss">
                8h00
            </div>  
        </div>

        <div class="col ">
            <div class="block hours noss">
                8h00
            </div>  
        </div>

        <div class="col ">
            <div class="block hours noss">
                8h00
            </div>  
        </div>

        </secction> 

        <!-- end of first row -->




        <!-- segend row  -->

        <section class="rowTwoo">

        <div class="col ">
            <div class="block hours">
                8h00
            </div>  
        </div>

        <div class="col pers">
            <div class="block hours noss">
                8h00
            </div>  
        </div>

        <div class="col pers">
            <div class="block hours noss">
                8h00
            </div>  
        </div>

        <div class="col pers">
            <div class="block hours noss">
                8h00
            </div>  
        </div>

        </section>

        <!-- end of segend row  -->

CSS:

.block {
    border-style: solid;
    border-color: black;
    border-width: 1px;
    vertical-align: center;
}

.col {
    float:left;
    width:150px;
}


.hours {
height:60px;
text-align:center;
vertical-align:top;
font-weight:bold;
}

.rowTwoo {

    width: 100%;
    height: auto;
    overflow:auto;
}



.rowOne {
    .noss {
    height:30px;

    }
}

.rowTwoo {
    .pers {
        position: relative;
        bottom:30px;
        z-index: 9;
    }
}

................................................ ...................................................

Answer 1

在这种情况下，你不得不提

<div class="clear"></div>

每第 4 个元素(在您的情况下，将上面的代码放在第 4 个之后。为此添加 CSS，

.clear{clear:both; height:0; overflow:hidden;}