使用動態左值重新調整絕對定位的div jQuery？

Question

我寫了一個可以正常工作的函數，但是當我擴展它來添加多個圖層時，我可以告訴我的數學全部關閉。我本質上是試圖通過改變寬度，左側，頂部值來調整絕對div的大小（對於這個問題，我更關注於理解數學和使用$(window).width()，調整左側值，如果你想進入更深入）。這是一個fiddle到demo我說的更好一點。

這個功能對我來說又是基於正確的數學，這就是爲什麼我失敗，因爲我知道數學是關閉的，我不知道如何把我正在使用的元素，並利用窗口寬度來縮放它。

這fiddle應該解釋一切，但讓我給你一些快速的細節。

詳情：用戶可以添加多個圖層，因爲他/她想使用jQuery的.draggable()圖層拖動到所需的位置，然後將其保存到數據庫，然後是位置和內容放在前面使用結束。

我想要做的是使這個響應，CSS不工作，因爲位置是隨機的/動態的。

HTML例如：

<div class="jsfiddle-container"> 
    <div class="example"> 

     // You can see the positions are in no particular order 
     <div class="d1" data-orig="191px" style="position: absolute; left: 191px;"><span></span>Stewie Griffen</div> 
     <div class="d2" data-orig="10px" style="position: absolute; left: 10px;"><span></span>Brian Griffen</div> 
     <div class="d3" data-orig="419px" style="position: absolute; left: 419px;"><span></span>Peter Griffen</div> 

    </div> 
    </div> 

jQuery的片段：內其他fiddle

obj.each(function() { 
     var leftData = $(this).data('orig'); 
     var left = parseInt(leftData); 
     $(this).css({ 

       'left': w_d - left, 
       'width': w_d, 

    }); 

閉幕：的框架，我覺得是幾乎所有的設立，這是隻是把數學算下來，然後搭上$(window).width()與屏幕滾動時的左側值一起，並將寬度正確設置。

有些幫助會很棒，讓我很頭疼，我也很高興聽到大家的意見。另外，如果你想了解更多的細節，請問，我寫了一些代碼來適應小提琴的不完美，但我想告訴你我在說什麼，也許給你一些東西來玩。

Answer 1

如果你想要做的是，當容器是< 800像素寬，所有div改變寬度，以填補頂部完美，那麼爲什麼不使用百分比基於寬度爲100％左以及作爲分離器的元素數量。

例如如果寬度爲600px，並且您有3個div，那麼600px會是100％，您會有3個元素，因此每個元素分別爲33％和600/3 = 200px。然後從0開始，設置你的左邊增加這個數量。

var itemWidth = 0; 
var numOfItems = $(obj).length; 
var containerWidth = $(".jsfiddle-container").css.width; 

if (containerWidth <= 800) 
{ 
    itemWidth = containerWidth/numOfItems; 
    var count = 0; 

    obj.each(function() { 
     $(this).css({ 
      'left': (itemWidth * count) + 'px', 
      'width': itemWidth + 'px', 

     }); 
     count++; 
    }); 
} 
else 
{ 
    // Set static width 
}