Jquery 随着车窗宽度的变化，流畅地调整div位置

我有一个

div

，其中有多个绝对定位div。我想在调整窗口大小时，这些内部div的左侧位置可以流畅地移动。到目前为止，我的一个例子可以在这里看到：

---

我该怎么做？我想我会使用jQuery？请注意，我不是在寻找媒体查询，而是在窗口宽度改变时提供流体运动的查询。

您可以使用百分比作为

left

属性的值。在您的Fiddle示例中，您必须更改两个文本选择器，才能使用以下css声明：

#text{
  color: #c9d35f;
  top: 100px;
  left: 15%;
}

#text2{
  color: #fa48bc;
  top: 175px;
  left: 30%;
}

---

我仍然很清楚你在寻找什么，但是为了修改文本偏移量，你要做的是使用、和的组合

首先检查当前偏移量

$（'#text'）

。请注意，您可能认为可以使用

$（'#text'）.css（“left”）

实现这一点，但实际上需要使用

加载时，您需要检查窗口的当前大小，以便确定窗口是变大了还是变小了（这意味着您在调整大小时正在缩小或增大窗口）。您可以将这些值与

.resize（）

中的值进行比较，以确定窗口现在是大还是小

最后，您可以使用

$（“#text”）.css（“left”，text#u offset+=10）设置
#text
元素的
左偏移量。请注意，缩小窗口时会增加偏移，放大窗口时会减少偏移

下面是一个将所有这些放在一起的示例：


var w=0；
var text_offset=$（'#text'）.position（）.left；
$（文档）.ready（函数（）{
w=$（窗口）.width（）；
});
$（窗口）。调整大小（函数（）{
如果（w>$（窗口）.width（））{
$（“#text”）.css（“左”，text#u偏移量+=10）；
}否则{
$（“#text”）.css（“左”，text#u偏移量-=10）；
}
w=$（窗口）.width（）；
});
.top{
字体：“Arial粗体”；
字体大小：粗体；
高度：300px；
背景色：#000000；
位置：相对位置；
文本对齐：居中；
}
.上分区{
位置：绝对位置；
}
#正文{
颜色：#c9d35f；
顶部：100px；
左：150px；
}
#文本2{
颜色：#fa48bc；
顶部：175px；
左：250px；
}

我的文字
其他文本
请更新您的小提琴。：）“流畅地移动”是什么意思？上楼？下楼？旋转是否基于父容器的百分比宽度移动？移到页面外？@DanielTate:我的意思是调整水平位置。我希望保持内部div之间的相对位置为true，但它们之间的距离会随着窗口宽度的变化而减小。在我看来，如果我能够动态调整css中的
位置：left
属性，我就可以做一些事情。如果我能想出办法，我会提供一个更好的例子；-）。^两个元素都是绝对定位的；无论窗口大小如何，它们之间的差异始终是相同的。@ObsidManager：仅当我更改它们的数量相同时。我打算将新的左位置设置为窗宽和前一个左位置的函数。虽然也许有人可以建议一种更优雅的方式？这种效果正是我问这个问题时想要的。谢谢！