$(document).ready(function() {
//console.log($("#content").children().first());
$("#content").append('<div id="slider"></div>');
// initially reset
var left = $("#content").children().first().position().left;
var width = $("#content").children().first().width();
$('#slider').css({
'left': left,
'width': width
});
var delay = 150,
setTimeoutConst;
$('.steps').hover(function() {
var that = this;
setTimeoutConst = setTimeout(function() {
var left = $(that).position().left;
var width = $("#content").children().first().width();
$('#slider').stop().animate({
'left': left,
'width': width
}, 300);
}, delay);
}, function() {
clearTimeout(setTimeoutConst);
});
})#content {
width: 95%;
padding: 15px 2.5% 0px 2.5%;
line-height: 0;
}
.steps {
width: 20%;
height: 150px;
display: inline-block;
background-color: white;
}
#slider {
position: absolute;
left: 0;
height: 150px;
width: 20%;
background-color: rgb(240, 240, 240);
display: inline-block;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="script.js"></script>
<title>Document</title>
</head>
<body>
<div id="content-wrap">
<div id="content">
<div class="steps" style="background-color: aqua;"></div>
<div class="steps" style="background-color:black"></div>
<div class="steps" style="background-color: aqua;"></div>
<div class="steps" style="background-color: black;"></div>
<div class="steps" style="background-color: aqua;"></div>
</div>
</div>
</body>
</html>我创建了一个 slider div，当鼠标悬停在 class=“steps”的 div 元素上时会滑动。问题是当我调整窗口大小时， slider div 没有调整其宽度。所以我将宽度转换为百分比值。一个换行内有 5 个 div(class="steps")，每个 div 的宽度=20%，以及同一换行内的 slider div，宽度="20%(以匹配步骤 div 的宽度)。但是宽度slider div 的个数比steps div 的个数多。 我应该怎么做，才能使 slider div 与步骤 div 的宽度相同，并在调整窗口大小时调整其宽度？
最佳答案
使用 Flexbox 创建元素行或列。在 #content 元素上设置 display: flex 使其成为 flex-container。容器内的所有子项都将被视为flex-children。
CSS Tricks 有一个 great guide on Flexbox 。请务必检查一下。
Here is an explanation为什么 display: inline-block 创建您当前拥有的空白。
您需要添加一些 CSS 规则来调整 #slider 元素的大小。首先确保 slider 的父元素或容器具有 position:relative。这会将每个绝对定位元素相对于相对父级进行定位。
现在 slider 上的 width: 20% 将与 .step 元素上的宽度相同，并且使 slider 调整大小无需使用JavaScript。如果这是一个样式问题，它可能可以(并且应该)使用 CSS 来修复，请记住这一点。
还可以使用 border-box 模型来组合元素上的内边距和宽度。默认情况下，所有元素都有 box-sizing: content-box ，它将向宽度添加填充。例如: width: 100px 和 padding: 0 10px 0 10px 将使元素宽度 120px。
使用 box-sizing: border-box 不会向宽度(或高度)添加内边距，而只会向元素内部添加内边距。 MDN has some awesome examples展示它是如何工作的。
查看更新后的示例并让我知道它是否有效。
编辑
调整大小时的定位问题来自 slider 元素的固定值位置。该值必须根据单个步长的宽度重新计算为百分比值。
您可以通过检查当前悬停在元素上的索引并将索引乘以单个步骤的宽度来完成此操作。现在，在数字后面添加 '%' 字符串，您将获得第一个索引的值 '0%'，'20%'对于第二个，'40%'，依此类推。
现在 slider 元素将随时处于正确的位置。
$(document).ready(function() {
//console.log($("#content").children().first());
$("#content").append('<div id="slider"></div>');
var delay = 150,
width = 20,
setTimeoutConst;
$('.steps').hover(function() {
var $that = $(this),
index = $that.index();
setTimeoutConst = setTimeout(function() {
var left = index * width + '%';
$('#slider').stop().animate({
'left': left,
}, 300);
}, delay);
}, function() {
clearTimeout(setTimeoutConst);
});
})*, *::before, *::after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
html {
box-sizing: border-box;
}
#content-wrap {
width: 100%;
padding: 15px 2.5% 0px 2.5%;
}
#content {
position: relative;
display: flex;
flex-wrap: wrap;
width: 100%;
}
.steps {
width: 20%;
height: 150px;
background-color: white;
}
#slider {
position: absolute;
left: 0;
height: 150px;
width: 20%;
background-color: rgb(240, 240, 240);
display: inline-block;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="script.js"></script>
<title>Document</title>
</head>
<body>
<div id="content-wrap">
<div id="content">
<div class="steps" style="background-color: aqua;"></div>
<div class="steps" style="background-color: black"></div>
<div class="steps" style="background-color: aqua;"></div>
<div class="steps" style="background-color: black;"></div>
<div class="steps" style="background-color: aqua;"></div>
</div>
</div>
</body>
</html>关于javascript - 绝对位置，即使转换为百分比后窗口调整大小问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59907794/