overlapping divs based on width of floating containment div

i have a bunch of divs that are representing cards in a hand. depending on how many are drawn, i want to be able to have them start to stack on top of each other so that the hand container div is only one row deep. the card divs are also set up as draggables so this 开发者_StackOverflow社区is kind of me trying to figure out a way to auto sort them. would using jquerys position setters be the best way to go about this?

i ended up taking the width of the container div and manually spacing each element in it.

    function alignHand(){
            var cards = $(".inHand");
            var totalWidth = 0;
            var width = $('#hand').width() - 140;
            cards.each(function(e){
                    totalWidth = totalWidth + 1;
                    $(this).addClass('cardInHand' + totalWidth);
                    $(this).css('position','absolute');
                    $(this).css('left',width/cards.length * (totalWidth - 1) + 'px');

            });