Question

我想要实现的是：我单击一个按钮，div出现并且将其放置在其他两个容器之间，而不移动它们。

因此在这个小提琴中：http://jsfiddle.net/7tbsR/26/我只会看到方框1和3，但是当我单击按钮时，就像在小提琴中一样，方框2出现在这两个容器之间，但是没有移动它们。我只需要CSS部分的帮助。

<div class="container">
  <div class="box-1">Box 1</div>
  <div class="box-2">Box 2</div>
  <div class="box-3">Box 3</div>
  <button class="cta">
    Click
  </button>
</div>

CSS

.box-1{
  background-color: gray;
  padding: 20px 40px;
}

.box-2{
  background-color: darkgray;
  padding: 20px 40px;
}

.box-3{
  background-color: gray;
  padding: 20px 40px;
}

Answer 1

使用可见性：隐藏可保留空间。点击后，可见性变为“可见”。

$("body").on("click", "button", function() {
  $(".box-2").css("visibility", "visible");
});

.box-1{
  background-color: gray;
  padding: 20px 40px;
}

.box-2{
  background-color: darkgray;
  padding: 20px 40px;
  visibility: hidden;
}

.box-3{
  background-color: gray;
  padding: 20px 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="box-1">Box 1</div>
  <div class="box-2">Box 2</div>
  <div class="box-3">Box 3</div>
  <button class="cta">
    Click
  </button>
</div>

Answer 2

如果您熟悉JavaScript，则可以使用JS轻松完成所需的操作。

您需要做的是将以下代码块添加到html代码的末尾：

<script>
function myFunction() {
var x = document.getElementById("box-2");
if (x.style.display === "none") {
    x.style.display = "block";
} else {
    x.style.display = "none";
}
}
</script>

然后您按钮的代码将更改为：

<button class="cta" onclick="myFunction()">

现在，当您单击按钮时，div将显示，再次单击时，它会消失。

最后，您的整个代码如下所示：

<style>
.box-1{
background-color: gray;
padding: 20px 40px;
}

#box-2{
background-color: darkgray;
padding: 20px 40px;
display: none;
}

.box-3{
background-color: gray;
padding: 20px 40px;
}
</style>
<div class="container">
<div class="box-1">Box 1</div>
<div id="box-2">Box 2</div>
<div class="box-3">Box 3</div>
<button class="cta" onclick="myFunction()">
Click
</button>
</div>

<script>
function myFunction() {
var x = document.getElementById("box-2");
if (x.style.display === "none") {
    x.style.display = "block";
} else {
    x.style.display = "none";
}
}
</script>

顺便说一句，我使用了内部CSS。如果您的CSS是外部的，则可以删除<style>和</style>标签之间的代码。

Answer 3

我只对CSS有问题，当我将框2放在框1和框3之间时，它们改变了位置。我最终解决了以下问题：绝对。谢谢大家的回答。

单击后将div放置在其他两个之间而不移动

3 个答案: