Aligning sortable sections of jQuery UI with spacing between them

Question

So here is the problem: I have 6 sections that use jQuery UI sortable . They are located as shown in the image below.

The image is the layout I'm looking for, equal distance between each of the divs, but with ends up along the edges of the container.

My understanding is that this cannot be done, for example, with setting margin-right: 10px on all of them and deleting the fields on the 3rd and 6th elements, since they can be dragged to another position, so they no longer will be in 3rd and 6th position.

I don’t think that this can be done by adding each section to the column div and setting connectWith in the jQuery sort setting, since this set of 6 is inside the div that is linked to other lists, and I don’t think you can have connectWith: '.connectedSortable .column 'anyway.

I also tried using the: nth-child (n) pseudo-class, but could not correctly update the fields when moving the elements: (

Here you can view jsfiddle> http://jsfiddle.net/hC5Qy/1/

Currently, the width of the boxes is 32%, the idea is that I can set 2% of the right / left margin on two of the boxes to give 100% (32 + 32 + 32 + 2 + 2 = 100).

So any ideas?

Are there any ways to use javascript? Can any new CSS3 or HTML5 layouts be used to center the middle box? (I'm not worried about the compatibility of the old browser).

Any help is much appreciated!

thanks

[edit: some code from the script]

HTML:

<div id="area1" class="connectedSortable"> <div class="block"><span style="font-size:3em; color:#CCC;">1</span></div> <div class="block"><span style="font-size:3em; color:#CCC;">2</span></div> <div class="block"><span style="font-size:3em; color:#CCC;">3</span></div> <div class="block"><span style="font-size:3em; color:#CCC;">4</span></div> <div class="block"><span style="font-size:3em; color:#CCC;">5</span></div> <div class="block"><span style="font-size:3em; color:#CCC;">6</span></div> </div> 

JS:

 $(function() { $(".connectedSortable ").sortable({ connectWith: ".connectedSortable" }); $(".connectedSortable").disableSelection(); }); 

CSS

 #area1, #area2 { border:1px solid red; float:left; width:680px; margin-bottom:15px; background:#ccc; } .block { background:green; width:32%; height:200px; float:left; margin-right:1%; margin-top:10px; } 

Answer 1

(deleted previous post):

This is not nth-child, it is a combination of floats and percentages. Here's a hacker way to “fix” it:

http://jsfiddle.net/hC5Qy/5/

 #area1, #area2 { border:1px solid red; float:left; width:680px; margin-bottom:15px; background:#ccc; } .block:nth-child(3n+3) { margin-right: 0 ; // get rid of extra margin float: right; // floating it right ensures no gap on right if rounding changes gutters } .block { background:green; width:32%; // 3 of these = 96% float: left; height:200px; margin-right:2%; // 2 of these = 4% for a total of 100% margin-top:10px; } 

It uses nth-child so that every third element does not have a right edge and floats to the right, and narrows the container. This gives an indefinite approximation of what you need to do.

However, with your fields, etc. based on%, it will be difficult for you to make it perfectly consistent all the time. At some point, the numbers will be rounded to the nearest pixel (browsers will eventually be displayed in pixels!), So your fields can be pixels or two.

There is more work to make it more consistent, but I didn’t think you needed me to customize it endlessly; I got the impression that you just want to know "what?" so you can continue this on your own .; -)

For my two cents, I would not use a float, instead I relied on the display: inline-block. The built-in block is not supported in IE7 and below, although there are hacks to fake it. If IE6 and 7 are not important for the project, I would reorganize the layout using the built-in block.

Answer 2

EDIT: oops, I overlooked that you tried all this. However, does it seem to work great when moving blocks?

You can use the CSS3 nth-child property:

 .block:nth-child(3n+1) { /* 1st, 4th, 7th, ... element */ margin-left:1%; } .block:nth-child(3n+3) { /* 3rd, 6th, 9th, ... element */ margin-right:1%; } 

However, some strange things I can not explain:

• It doesn't fit perfectly with a width of 680 pixels, but it has a width of 700 pixels - I have no idea why ... (in Chrome Firefox works fine on 680 as well)

http://jsfiddle.net/hC5Qy/2/