javascript - 当我在 html5 中填充网格时如何避免出现空白？

Question

如何在填充网格时避免出现空格，我想使用所有空格。

在这个例子中，我如何在带有加号的 div 下方的空间中引入数字 4 的 div，并避免网格中的空白区域，数字 4 的 div 向下并勾勒出网格。

这是我的代码:

html

<div id="grid">
   <div class="cell2x3" >1</div>
   <div class="cell1x1" >+</div>
   <div class="cell2x2" >2</div>
   <div class="cell1x3" >3</div>
   <div class="cell2x1" >4</div> 
   <div class="cell1x2" >5</div> 
</div>

CSS:

#grid {
width: 600px;
height: 300px;  
outline: 1px solid blue;
}

.cell {
    outline: 1px solid red;
    float: left;
    height: 100px;
    width: 100px;
}

.cell2x3 {
    outline: 1px solid red;
    float: left;
    height: 200px;
    width: 300px;
}

.cell1x1 {
    outline: 1px solid red;
    float: left;
    height: 100px;
    width: 100px;
}

.cell2x2 {
    outline: 1px solid red;
    float: left;
    height: 200px;
    width: 200px;
}

.cell1x3 {
    outline: 1px solid red;
    float: left;
    height: 100px;
    width: 300px;
}
.cell2x1 {
    outline: 1px solid red;
    float: left;
    height: 200px;
    width: 100px;
}

.cell1x2 {
    outline: 1px solid red;
    float: left;
    height: 100px;
    width: 200px;
}

这是 fiddle

Answer 1

您需要清除 float 。输入

<div style="clear:both"></div>

删除当前 div 的 float 并有效地创建一个新行。