0

我写了一个可以正常工作的函数，但是当我扩展它以添加多个层时，我可以告诉我我的数学已经完全关闭了。我本质上是在尝试通过更改它们的宽度、左侧、顶部值来调整绝对 div 的大小（对于这个问题，我更专注于理解数学和使用$(window).width()，调整左侧值，如果你想了解更多，还可能调整宽度深度）。这是一个小提琴，可以更好地演示我在说什么。

同样，这个功能对我来说主要是基于正确的数学，这就是我失败的原因，因为我知道数学是关闭的，我不确定如何获取我正在使用的元素并利用窗口宽度来缩放它。

这个小提琴应该解释这一切，但让我给你一些快速的细节。

详细信息： 用户可以使用 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 片段： 更多在这个小提琴

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

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

  });

关闭：我觉得框架几乎都设置好了，只是把数学计算下来，$(window).width()在屏幕滚动时将左值与左值绑定，并正确设置宽度。

一些帮助会很棒，让我省去很多头痛，我也很高兴听到每个人的意见。另外，如果您想了解更多详细信息，请询问，我重新编写了一些代码以适应小提琴它并不完美，但我想向您展示我在说什么，也许会给您一些可以玩的东西。

4

1 回答 1

1

如果您要做的是，当容器的宽度 < 800px 时，所有 div 都会更改宽度并左移以完美填充顶部，那么为什么不使用基于宽度的百分比为 100% 和元素数量作为分离器。

例如，如果宽度为 600 像素并且您有 3 个 div，那么 600 像素将是 100%，您将有 3 个元素，因此每个 33% = 600/3 = 200 像素。然后从 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
}
于 2013-08-21T09:01:37.820 回答