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

如果你要做的是，当容器是＆lt; 800px宽度，所有div都改变宽度并向左移动以便完美地填充顶部，那么为什么不使用基于宽度的百分比为100％和元素数量作为分割器。

e.g。如果宽度为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
}

使用动态左值jQuery调整绝对定位div的大小？

1 个答案: