我有一个父div除以2个其他div和其中一个div，我想使div的旋转，但我既不能把div彼此相邻也不能使它与JS工作。
我试过使用display inline-block和flex使它们彼此相邻，虽然JS代码可以工作，但这不是我想要的。
const leftArrow = document.querySelector('.left-arrow');
const rightArrow = document.querySelector('.right-arrow');
let slide = document.querySelectorAll('.slide');
leftArrow.addEventListener('click', ()=>{
slide.forEach(slide => {
slide.style.transform = 'translateX(0px)'; // 200px is just so I can see if the movement works
})
});
rightArrow.addEventListener('click', ()=>{
slide.forEach(slide => {
slide.style.transform = 'translateX(200px)'; // 200px is just so I can see if the movement works
})
});*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
main {
min-height: 100vh;
background-image: url(../images/bg.jpg);
display: flex;
align-items: center;;
justify-content: center;
}
h1{
font-family: 'Montserrat', sans-serif;
color:#729CC6;
font-size: 96px;
padding-bottom: 30px;
}
h2{
color:#729CC6;
}
p{
font-family: 'Lora', serif;
color:#729CC6;
font-size: 3.72vh;
padding-bottom: 60px;
}
.glass{
border: 1px solid black;
position: relative;
min-height: 80vh;
width: 80%;
overflow: hidden;
}
/* SIDE-NAV */
.side-nav{
border: 1px solid red;
position: absolute;
left: 0;
height: 100%;
min-height: 80vh;
width: 150px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
}
.nav{
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
width: 100%;
height: 100%;
border: 1px solid red;
}
.screen-home {
position: absolute;
top: 11rem;
left: 17rem;
}
.screen {
border: 1px solid blue;
position: absolute;
top: 1.5rem;
left: 17rem;
}
.left-arrow {
position: absolute;
top: 2.5rem;
right: 12.5rem;
height: 80px;
z-index: 99;
cursor: pointer;
}
.right-arrow {
position: absolute;
top: 2.5rem;
right: 6.5rem;
height: 80px;
z-index: 98;
cursor: pointer;
}
.title{
font-family: 'Lora', serif;
font-size: 44px;
font-weight: bold;
}
.desc{
font-family: 'Lora', serif;
font-size: 26px;
font-weight: normal;
line-height: 4rem;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Lora&display=swap" rel="stylesheet">
</head>
<body>
<main>
<div class="glass">
<img class="left-arrow" src="" alt="left-arrow"></a>
<img class="right-arrow" src="" alt="right-arrow"></a>
<div class="side-nav">
<div class="nav">
<a href="#"> <img class="side-nav-icon" src="" alt="nav"></a>
</div>
<div class="nav">
<a href="#"> <img class="side-nav-icon" src="" alt="nav"></a>
</div>
<div class="nav">
<a href="#"> <img class="side-nav-icon" src="" alt="nav"></a>
</div>
<div class="nav">
<a href="#"> <img class="side-nav-icon" src="" alt="nav"> </a>
</div>
<div class="nav">
<a href="#"> <img class="side-nav-icon" src="" alt="nav"> </a>
</div>
</div>
<!-- SCREEN -->
<div class="screen">
<h1>Lorem ipsum</h1>
<div class="slide">
<h2 class="title">Title text</h2> <br>
<p class="desc">
- dolor sit amet, consectetur adipiscing <br>
- dolor sit amet, consectetur adipiscing <br>
- dolor sit amet, consectetur adipiscing <br>
- dolor sit amet, consectetur adipiscing</p>
</div>
<div class="slide">
<h2 class="title">Title text</h2> <br>
<p class="desc">
- dolor sit amet, consectetur adipiscing <br>
- dolor sit amet, consectetur adipiscing <br>
- dolor sit amet, consectetur adipiscing <br>
- dolor sit amet, consectetur adipiscing</p>
</div>
<div class="slide">
<h2 class="title">Title text</h2> <br>
<p class="desc">
- dolor sit amet, consectetur adipiscing <br>
- dolor sit amet, consectetur adipiscing <br>
- dolor sit amet, consectetur adipiscing <br>
- dolor sit amet, consectetur adipiscing</p>
</div>
</div>
</main>
</body>
</html>您只需要在幻灯片周围使用包装器div。它有overflow: hidden和一个比父元素宽的width。通常在滑动时对包装器应用负的margin-left，但是对幻灯片应用translate也可以工作。
如果你处理的是预先确定的大小，事情就容易多了，否则你就需要使用JS从幻灯片中获得测量值并进行一些计算。包装器的宽度应该是幻灯片宽度的总和。如果你的包装器足够宽，display: inline-block将把所有内容放在同一行。