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

您需要清除浮动。输入

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

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

Answer 2

使用jQuery的解决方案：

1 - 使用数字4的div元素

var div_4 = $('#grid').children('div').eq(4);

2 - 从DOM中删除div元素whit number 4

div_4.remove();

3 - 使用加号

在div之后添加div元素whit number 4

div_4.insertAfter($('#grid').children('div').eq(1));

这可以更加优化。

使用jQuery remove（）方法时，您需要牢记两件事：

虽然使用 remove（）从DOM中删除了所选元素，但它们尚未从jQuery包装器集中删除。这意味着理论上你可以继续对它们进行操作，甚至可以根据需要将它们添加回DOM中。
此方法不仅会从DOM中删除元素，还会删除所有删除的元素可能包含的事件处理程序和内部缓存数据。

如果您想要一个不使用jQuery的解决方案，请告诉我....

当我在html5中填充网格时如何避免空格？

2 个答案: