logo标签列表

有没有一种方法可以使第三个 div 保持固定？

javascriptjquerycss
3

有没有办法让第三个 div 的定位方式变成 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>

你能否尝试将justify-content: space-around;更改为justify-content: flex-end;，并应用于id为#flex的元素？ - Maniraj Murugan
@ManirajMurugan @vitechster 我创建了一个演示 https://jsfiddle.net/eqkds62c/，当转换时，在类上添加了 justify-content: flex-end; 的 CSS。 - Hardik Godhani
4个回答
2

请试一次
您只需添加包装器 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>

1
嗨@shweta，请添加一些解释。这将让提问者更好地理解。 - Lakshya Thakur
@shwetaramani 我认为使用 width:33.33% 或者 width:calc(100%/3) 可以更好地设置宽度。 - Hardik Godhani
@shwetaramani 不需要包装额外的div，您可以通过在#flex上使用justify-content: flex-end;属性，在子元素中添加#flex > div { flex: 1 0 33.33%; max-width: 33.33%;}，然后现有的布局将在不移动div元素的情况下工作。 - Raeesh Alam
1
不需要用extra div 包装 div，您可以通过在#flex div 上使用 justify-content: flex-end; 属性来实现现有的 div 结构的布局。
并在子元素上添加css，如：#flex > div { flex: 1 0 calc(100% / 3); max-width: calc(100% / 3);}。

Flexbox源码：https://css-tricks.com/snippets/css/a-guide-to-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;
  font-size: 20px;
}
button {
  padding: 15px 20px;
  margin-bottom: 5px;
}

#flex {
  display: flex;
  position: relative;
  justify-content: flex-end;
  width: 100%;
}
#flex > div {
  flex: 1 0 calc(100% / 3);
  max-width: calc(100% / 3);
  border: 1px solid black;
  height: 30vh;
}
#div1 {
  background-color: blueviolet;
}
#div2 {
  background-color: salmon;
}
#div3 {
  background-color: greenyellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

1
嗨，Raeesh，你的方法很有趣。你能多解释一下 flex 和 max-width 如何帮助我们实现这个目标吗？ - Lakshya Thakur
1
顺便说一下，如果第一个 div 被设置为向上滑动最后一个 div，则这将无法工作。 - Lakshya Thakur
@LakshyaThakur 你好 Thakur，如果你想改变 div 方向，比如从第一个到最后一个或者从最后一个到第一个，那么你需要使用 margin-left: auto; 和 margin-right: auto; 属性来实现... 它的行为类似于 flexbox 布局中的 float: left; 或 float: right;。 - Raeesh Alam
0
你可以尝试这个方法，它会根据你在#flex中放置了多少个divs自动调整。你对于divs的问题是正确的，一旦它们高度为0，它们就会消失，而且由于它们是由flex居中的，所以它们往往会自我居中。现在将其包含在中将防止其消失。 

$(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);
  });
$("#flex div div").parent().css({
    "width":((100 / ($("#flex div div").parent().length)).toFixed(0)-1)+ "%",
    "display":"inline-block",
    "vertical-align":"top"
});
});
h1 {
  text-align: center;
}

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

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

button {
  padding: 15px 60px;
}

#flex {
  display: table;
  position: absolute;
  top: 30vh;
  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;
}
<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>
        <div id="div1"></div>
    </div>
    <div>
        <div id="div2"></div>
    </div>
    <div>
        <div id="div3"></div>
    </div>
</div>
<script src="script.js"></script>
</body>
</html>

0

这是另一种方法。它完全不依赖于display:flex。在这里，我们使flex div具有position:relative，并且它的子元素即flex>div或box具有position:absolute。

现在，在JS代码的开头，我添加了一些动态处理这些绝对定位子元素的left位置的代码。在我们的例子中，div1将以left = 0%结束，div2将以left = 33%结束，div3将以left = 66%结束。我还添加了平滑的transition来弥补定位元素的延迟。

现在，您的slideUp和slideDown正在处理绝对定位元素，这些元素实际上不像普通的position:static元素那样占用任何空间（是的，这是默认值）。因此，您现在不需要将它们包装在额外的单独div中。

此外，这只是众多方法之一。想炫耀一下，所以分享给大家。

$(document).ready(function () {
  let leftPos = 0;
  let boxes = [...document.querySelectorAll('.box')];
  for(let index = 1;index<boxes.length;index++)
  {
      boxes[index].style.left = `${(100/boxes.length)*index}%`;
  }
   
  $("#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 {

  position: relative;
  top: 30vh;
  width: 99vw;
}

#flex > div {
  width: 30vw;
  position:absolute;
  border: 1px solid black;
  transition: left 0.5s;
  height: 30vh;
}

#div1 {
  background-color: blueviolet;
}

#div2 {
  background-color: salmon;
  left:0
}

#div3 {
  background-color: greenyellow;
    left:0
}

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 class='box' id="div1"></div>
      <div class='box' id="div2"></div>
      <div  class='box' id="div3"></div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接