有没有办法让第3个div保持固定

Vtechster 发表于 Dev

威特斯特

有什么办法可以使第3div位定位到fixed，因为当我单击该slideUp按钮时，它们divs正在崩溃。我希望他们所有人在当前位置上上下滑动。我认为flexbox这是因为它使整个事情处于中心位置。我尝试删除它，但仍然无法正常工作。

$(document).ready(function () {
  $("#btn2").click(function () {
    $("#div1").slideUp();
    $("#div2").slideUp("slow");
    $("#div3").slideUp(3000);
  });

  $("#btn1").click(function () {
    $("#div1").slideDown();
    $("#div2").slideDown("slow");
    $("#div3").slideDown(3000);
  });
});

h1 {
  text-align: center;
}

#btn1 {
  position: absolute;
  left: 60vw;
}

#btn2 {
  position: absolute;
  left: 20vw;
}

button {
  padding: 15px 60px;
}

#flex {
  display: flex;
  position: absolute;
  top: 30vh;
  justify-content: space-around;
  width: 99vw;
}

#flex > div {
  width: 30vw;
  border: 1px solid black;
  height: 30vh;
}

#div1 {
  background-color: blueviolet;
}

#div2 {
  background-color: salmon;
}

#div3 {
  background-color: greenyellow;
}

button:active,
button:visited {
  background-color: yellow;
}

.white {
  background-color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
    <script src="jquery.min.js"></script>
    <title>Assignment</title>
  </head>
  <body>
    <h1>Demonstrate slideUP() and slideDown() with different parameters.</h1>
    <button id="btn1">CLick to slideDown boxes</button>
    <button id="btn2">CLick to slideUp boxes</button>
    <div id="flex">
      <div id="div1"></div>
      <div id="div2"></div>
      <div id="div3"></div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

什韦塔地图

请尝试一次。
您只需要添加包装器div并将其设置为width

.wrapper{
width:33.33%;
}

$(document).ready(function () {
  $("#btn2").click(function () {
    $("#div1").slideUp();
    $("#div2").slideUp("slow");
    $("#div3").slideUp(3000);
  });

  $("#btn1").click(function () {
    $("#div1").slideDown();
    $("#div2").slideDown("slow");
    $("#div3").slideDown(3000);
  });
});

h1 {
  text-align: center;
}

#btn1 {
  position: absolute;
  left: 60vw;
}

#btn2 {
  position: absolute;
  left: 20vw;
}

button {
  padding: 15px 60px;
}

#flex {
  display: flex;
  position: absolute;
  top:200px;
  justify-content: space-around;
  width: 99vw;
}

#flex > div > div {
  width: 30vw;
  border: 1px solid black;
  height: 30vh;
}

#div1 {
  background-color: blueviolet;
}

#div2 {
  background-color: salmon;
}

#div3 {
  background-color: greenyellow;
}

button:active,
button:visited {
  background-color: yellow;
}

.white {
  background-color: white;
}
.wrapper{
width:33.33%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
    <script src="jquery.min.js"></script>
    <title>Assignment</title>
  </head>
  <body>
    <h1>Demonstrate slideUP() and slideDown() with different parameters.</h1>
    <button id="btn1">CLick to slideDown boxes</button>
    <button id="btn2">CLick to slideUp boxes</button>
    <div id="flex">
    <div class="wrapper">
     <div id="div1"></div>
    </div>
     <div class="wrapper">
      <div id="div2"></div>
    </div>
    <div class="wrapper">
     <div id="div3"></div>
    </div>  
    </div>
    <script src="script.js"></script>
  </body>
</html>