如何使两个div之间的差距固定？

Question

In my page, their are two div;s which represent two rows . i want to make the gap between those two div's fixed so that when i use drag and drop, the dropped item goes horizontally to the next item instead of going vertically. please help thanks

<div id="div1" style="background-color:#778899;height:30px;width:1030px;float:left;">
<b>Columns :</b>

<div id="div2" style="background-color:#778899;height:30px;width:1030px;float:left;">
<b>Rows :</b></div>

so in the coloumn div, im using droppable feature of jquery

$('#example-1-2 .sortable-list').sortable({ connectWith: '#example-1-1 .sortable-list' }); 

So the problem is that when I drop an item, the dropped item gets added like a column one below the other. But what I want is that when I drop any item, it should get attached and like a row, one right to another. The column div is below the row div. Therefore, I was asking if we could fix the size of both, and the dropped item will move then in a row like fashion.

Answer 1

In your case their can be few problems

1 the dropped item have float

Solution remove that float

2 the dropped item have Inline

Solution Give that element Display:block so it can break out

the gaping of two divs is not affecting positioning of their child

Also post some of your code so we can see where the problem occurs. UPDATE use #div1 .sortable-item{display:inline; width:20%;}

the elements are showing block behavior just need to inline the elements