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

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

使用 visibility：hidden 可以保持空间被占用。单击时，可见性变为"可见"。

$("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 之间时，它们改变了位置。我最终解决了立场的问题：绝对。不过，谢谢大家的回答。