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)偏移量。请注意，缩小窗口时增加偏移量，放大窗口时减小偏移量。

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

＆＃13;

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();
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

我还创建了一个展示 here 的代码段。

请注意，您需要使用偏移值，可能使用1代替10（因为您拖动单个像素）！

希望这有帮助！：）

Answer 2

您可以使用百分比作为left属性的值。在你的小提琴例子中，你必须改变你的两个文本选择器，以便遵循css声明：

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

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

当窗口宽度发生变化时，可以流畅地调整div位置

2 个答案: