如何解决为什么边距不一致?
我已将我的子div的边距设置为40px,但父容器与第一div之间的距离小于第一与第二div之间的距离。此外,其余间隙之间的差异为1-2。您可以通过在JavaScript代码的第9行和第10行插入两个相邻元素的索引来代替现有索引来进行交叉检查。例如:第一个元素和第二个元素之间的间距为105px,第二个和第三个元素之间的间距为104px,第3个和第4个元素之间的间距为106px,第4个和第5个元素之间的间距为104px。这些都应该是40像素(我猜是80像素,因为我刚刚检查了边距就不会水平折叠)。我缺少一些非常基本的东西吗? I'm trying to make an image slider. Files
let projectContainer = document.querySelector(".project-container")
let projects = document.querySelectorAll(".project")
let initialPosition = 0;
let mouseIsDown = false
let distanceTravelled = 0;
elementAOffset = projects[3].offsetLeft;
elementBOffset = projects[4].offsetLeft;
elementAWidth = parseInt(getComputedStyle(projects[0]).width)
margin = (elementBOffset - (elementAOffset + elementAWidth))
var LeftSideBoundary = -1 * ((elementAWidth * 2) + (margin))
var RightSideBoundary = (elementAWidth * 6) + (margin * 5) + elementAOffset
var RightSidePosition = RightSideBoundary - elementAWidth;
projectContainer.addEventListener("mousedown",e => {
mouseIsDown = true
initialPosition = e.clientX;
console.log("Mouse key pressed")
})
projectContainer.addEventListener("mouseup",e => {
mouseExit(e)
})
projectContainer.addEventListener("mouseleave",e => {
mouseExit(e);
})
projectContainer.addEventListener("mousemove",e => {
if (!mouseIsDown) { return };
projects.forEach(project => {
project.style.transform = 'translateX(' + ((e.clientX - initialPosition) + project.currentTranslationX ?? 0) + 'px)'
shiftPosition(e,project)
})
})
function mouseExit(e) {
mouseIsDown = false
distanceTravelled = e.clientX - initialPosition
var example_project = projects[0]
var style = window.getComputedStyle(example_project)
currentTranslationX = (new WebKitCSSMatrix(style.webkitTransform)).m41
projects.forEach(project => {
var style = window.getComputedStyle(project)
project.currentTranslationX = (new WebKitCSSMatrix(style.webkitTransform)).m41
project.style.transform = 'translateX(' + (project.currentTranslationX ?? 0) + 'px)'
})
}
function shiftPosition(e,project) {
animationShift = window.getComputedStyle(project)
animationShift = (new WebKitCSSMatrix(animationShift.webkitTransform)).m41
animationShift = animationShift + project.offsetLeft
if (animationShift <= LeftSideBoundary) {
project.style.transform = "translateX(" + (RightSidePosition - project.offsetLeft) + "px)"
}
}
*,*::before,*::after{
margin:0px;
padding:0px;
box-sizing: border-box;
font-size:100px;
user-select: none;
}
.project-container{
width:1500px;
height:400px;
background-color: rgb(15,207,224);
margin:auto;
margin-top:60px;
white-space: nowrap;
overflow: hidden;
}
.project{
margin:40px 40px 40px 40px;
display: inline-block;
height:300px;
width:350px;
background-color:white;
border: black 3px solid;
user-select: none;
}
<body>
<div class="project-container">
<div class="project">1</div>
<div class="project">2</div>
<div class="project">3</div>
<div class="project">4</div>
<div class="project">5</div>
<div class="project">6</div>
<div class="project">7</div>
<div class="project">8</div>
</div>
</body>
解决方法
主要问题是您正在使用inline-block
,它使用嵌入式显示,这意味着 all 的内容都是嵌入式显示的,甚至是空格。您将看到HTML中的一个空格,位于一个块的</div>
和下一个块的<div>
之间。
例如,various workarounds删除了元素之间的空格,例如
<div class="project">1</div><div class="project">2</div><div class="project">3</div>...etc
但是,如今,最好的方法是使用flexbox布局。
- 在容器中使用
display:flex
- 这是您的示例的重要部分:
flex: none;
用于该容器内的盒子(否则,无论您指定的宽度如何,它们都会被调整大小以适合显示区域它们在CSS中)
您需要添加的CSS是:
.project-container{
display: flex;
/* rest of your CSS */
}
.project{
flex: none;
/* rest of your CSS */
}
有效代码段(请注意:我删除了页边距,以便您可以更清楚地看到它):
*,*::before,*::after{
margin:0px;
padding:0px;
box-sizing: border-box;
font-size:100px;
user-select: none;
}
.project-container{
display: flex;
width:1500px;
height:400px;
background-color: rgb(15,207,224);
margin:auto;
margin-top:60px;
white-space: nowrap;
overflow: hidden;
}
.project{
flex: none;
margin:40px 0;
display: inline-block;
height:300px;
width:350px;
background-color:white;
border: black 3px solid;
user-select: none;
}
<div class="project-container">
<div class="project">1</div>
<div class="project">2</div>
<div class="project">3</div>
<div class="project">4</div>
<div class="project">5</div>
<div class="project">6</div>
<div class="project">7</div>
<div class="project">8</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。