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

Question

how to avoid empty spaces when I fill a grid, I would like to use all the spaces.

In this example how can I introduce the div with the number 4 in the space under the div with the plus and avoid the empty spaces in the grid, the div with the number 4 is down and outline of the grid.

This is my code:

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;
}

This is the fiddle

Answer 1

You need to clear the float. type in

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

to remove the float of the the current divs and effectively create a new line.

Answer 2

Solution using jQuery:

1-Take the div element with the number 4

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

2-Remove div element whit number 4 from the DOM

div_4.remove();

3-Add div element whit number 4 after the div with the plus

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

This can be more optimized.

When using the jQuery remove() method, you need to keep two things in mind:

1. While the elements selected are removed from the DOM using remove() , they have not been removed from the jQuery wrapper set. That means in theory you could continue operating on them and even add them back into the DOM if desired.

2. This method will not only remove the elements from the DOM, but it will also remove all event handlers and internally cached data that the elements removed might have contained.

if you want a solution without use jQuery let me know....