随着窗口宽度的变化，可以灵活地调整div位置

Question

我有一个div，里面有多个绝对定位的div。我希望当窗口调整大小时，这些内部div的左边位置可以流畅地移动。到目前为止，我拥有的一个例子可以在这里看到：https://jsfiddle.net/ewqmfa4d/。

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

Answer 1

我仍然可以肯定的是，完全您想要的东西，但是为了修改文本偏移量，您想要做的是使用.resize()、.width()和.css()的组合。

首先检查$('#text')的当前偏移量。请注意，您可能认为可以使用$('#text').css("left")完成此操作，但实际上需要使用.position()。

在加载时，您需要检查窗口的当前大小，这样就可以计算出窗口是变大了还是变小了(这意味着在调整大小时，窗口正在缩小或增大)。您可以将这些值与.resize()中的值进行比较，以确定窗口现在是更大还是更小。

最后，可以使用left设置#text元素的$("#text").css("left", text_offset += 10)偏移量。注意，缩小窗口时增加偏移量，扩大窗口时减小偏移量。

下面是一个将所有这些组合在一起的例子：

​

var w = 0;
var text_offset = $('#text').position().left;

$(document).ready(function() {
  w = $(window).width();
});

$(window).resize(function() {
  if (w > $(window).width()) {
    $("#text").css("left", text_offset += 10);
  } else {
    $("#text").css("left", text_offset -= 10);
  }
  w = $(window).width();
});

.top {
  font: "Arial Bold";
  font-weight: bolder;
  height: 300px;
  background-color: #000000;
  position: relative;
  text-align: center;
}

.top div {
  position: absolute;
}

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='top'>
  <div id="text">My text</div>
  <div id="text2">Other text</div>
</div>

​

我还创建了一个展示这个这里的片段。

请注意，您需要使用偏移量值，可能使用1代替10 (因为您只拖动一个像素)！

希望这会有帮助！)

Answer 2

您可以使用百分比作为left属性的值。在Fiddle示例中，必须将两个文本选择器更改为必须遵循css声明：

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

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