如何设置div的样式，以使它们不会彼此堆叠？

Question

I'm trying to create a X x Y grid of jquery.droppable elements inside a single div.

for (var y = 0; y < 3; y++) {
        for (var x = 0; x < 3; x++) {
            $('<div>grid_' + x + '-' + y + '_').data( {'coordinates': [x, y]} ).appendTo( '#canvas-screen' ).droppable( {
                accept: '#elements-screen div',
                hoverClass: 'hovered',
                drop: handleElementDrop
            });
        }
    }

As you can see in the code above, I'm creating 9 jquery.droppable elements and appending them to a div called #canvas-screen . The only problem is that they're just stacking one on top of the other. How can i make it so that it would be a 3 x 3 grid, or more generally, an mxn grid, since I'll later want the user to choose the dimensions.

Upon inspecting my elements after the DOM has loaded, I'm getting:

<div id="canvas-screen">
  <div class="ui-droppable"></div>
  <div class="ui-droppable"></div>
  <div class="ui-droppable"></div>
  <div class="ui-droppable"></div>
  <div class="ui-droppable"></div>
  <div class="ui-droppable"></div>
  <div class="ui-droppable"></div>
  <div class="ui-droppable"></div>
  <div class="ui-droppable"></div>
</div> 

which makes sense to me, but I'm just not sure what CSS to add to get it to not just stack on top of each other.

Answer 1

kpscript, not sure how big your canvas-screen should be, but you can add a style of float: left to each .ui-droppable, and then give the #canvas-screen a width.

#canvas-screen {
     width: 500px;
}
.ui-droppable {
     width: 33%;
     float: left;
}

Answer 2

Here's a possible solution to setting up the grid programmatically using javascript. Each element positioned according to it's width, height, x and y.

var width = 100,
    height = 100,
    m = 3,
    n = 3;
for (var y = 0; y < m; y++) {
        for (var x = 0; x < n; x++) {
            $('<div>grid_' + x + '-' + y + '_').data( {'coordinates': [x, y]} )
                .css({
                  "width"    : width  + "px",
                  "height"   : height + "px",
                  "left"     : width * x  + "px",
                  "top"      : height * y + "px",
                  "position" : "absolute"
                })
                .appendTo( '#canvas-screen' )
                .droppable( {
                    accept: '#elements-screen div',
                    hoverClass: 'hovered',
                    drop: handleElementDrop
                });
         }
}

Answer 3

Here is an another alternative solution, i gave fixed width 50px to droppable box

<style>    
.column{
    clear:both;
}
.ui-droppable{
  width:50px;
  height:50px;
  border:1px solid black;
  display:block;  
  float:left;
}
</style>
<script>
    $(document).ready(function(){
        for (var y = 0; y < 3; y++) {
            $('<div class="column">').appendTo( '#canvas-screen');
            for (var x = 0; x < 3; x++) {
                $('<div>grid_' + x + '-' + y + '_').data( {'coordinates': [x, y]} ).appendTo( ".column:eq("+y+")").droppable( {
                    accept: '#elements-screen div',
                    hoverClass: 'hovered',
                    drop: handleElementDrop
                });
            }
        }
    function handleElementDrop(){
    }
    });
</script>


    <div id="canvas-screen">
    </div>