div 相对于其他两个 div 的位置

Question

我有一个由多个可以折叠的 div 组成的 div，然后是它们下面的另一个 div。

当前，如下面的小提琴所示，底部 div 仅在单击框 3 或框 1（左列）时向下滚动。

我希望右列（框 2 和 4）像左列一样向下滚动，但到目前为止我失败了。

我在这里先向您的帮助表示感谢。

 var drop = document.getElementsByClassName("drop"); var i; for (i = 0; i < drop.length; i++) { drop[i].addEventListener("click", function() { this.classList.toggle("active"); var collapse = this.previousElementSibling; if (collapse.style.maxHeight) { collapse.style.maxHeight = null; } else { collapse.style.maxHeight = collapse.scrollHeight + "px"; } }); }

 #panel { background-color: white; float: center; position: relative; width: 800px; /* height: 500px; */ margin: 0 auto; border-color: #B7B7B7; border-width: 2px; border-radius: 25px; } #box1 { border: 2px solid #B7B7B7; position: relative; display: inline-block; width: 250px; top: 0; left: 0; border-radius: 5px; transition: max-height 0.2s ease-out; } #box2 { border: 2px solid #B7B7B7; position: relative; display: inline-block; width: 525px; top: 0; float: right; border-radius: 5px; transition: max-height 0.2s ease-out; } #box3 { border: 2px solid #B7B7B7; display: inline-block; top: 0; left: 0; width: 250px; position: relative; border-radius: 5px; transition: max-height 0.2s ease-out; } #box4 { border: 2px solid #B7B7B7; display: inline-block; position: relative; top: 0; float: right; width: 525px; border-radius: 5px; transition: max-height 0.2s ease-out; } #travel { margin: auto; background-color: black; border-style: solid; border-color: #B7B7B7; border-width: 2px; border-radius: 5px; position: relative; margin-top: 15px; width: 800px; height: 300px; } .drop { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; border-radius: 5px; bottom: 0; } .active, .drop:hover { background-color: #ccc; } .collapse { padding: 0 18px; background-color: gray; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; }

 <div id=panel> <div id="box1"> <br>this is box 1<br> <div class="collapse"> <p>a drop</p> </div> <button class="drop">view more</button> </div> <div id="box2" style="margin-bottom: 15px;"> <br>this is box 2<br> <div class="collapse"> <p>a drop</p> </div> <button class="drop">view more</button> </div> <div id="box4"> <br>this is box 4<br> <div class="collapse"> <p>a drop</p> </div> <button class="drop">view more</button> </div> <div id="box3" style="margin-top: 15px;"> <br>this is box 3<br> <div class="collapse"> <p>a drop</p> </div> <button class="drop">view more</button> </div> <div id="travel"> </div> </div>

Answer 1

当您使 box2 和 box4 浮动在右侧时，您将需要在所有框之后使用清除元素来清除浮动对象的效果。 我在框后添加了<div style="clear:both"></div> ：

 var drop = document.getElementsByClassName("drop"); var i; for (i = 0; i < drop.length; i++) { drop[i].addEventListener("click", function() { this.classList.toggle("active"); var collapse = this.previousElementSibling; if (collapse.style.maxHeight) { collapse.style.maxHeight = null; } else { collapse.style.maxHeight = collapse.scrollHeight + "px"; } }); }

 #panel { background-color: white; float: center; position: relative; width: 800px; /* height: 500px; */ margin: 0 auto; border-color: #B7B7B7; border-width: 2px; border-radius: 25px; } #box1 { border: 2px solid #B7B7B7; position: relative; display: inline-block; width: 250px; top: 0; left: 0; border-radius: 5px; transition: max-height 0.2s ease-out; } #box2 { border: 2px solid #B7B7B7; position: relative; display: inline-block; width: 525px; top: 0; float: right; border-radius: 5px; transition: max-height 0.2s ease-out; } #box3 { border: 2px solid #B7B7B7; display: inline-block; top: 0; left: 0; width: 250px; position: relative; border-radius: 5px; transition: max-height 0.2s ease-out; } #box4 { border: 2px solid #B7B7B7; display: inline-block; position: relative; top: 0; float: right; width: 525px; border-radius: 5px; transition: max-height 0.2s ease-out; } #travel { margin: auto; background-color: black; border-style: solid; border-color: #B7B7B7; border-width: 2px; border-radius: 5px; position: relative; margin-top: 15px; width: 800px; height: 300px; } .drop { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; border-radius: 5px; bottom: 0; } .active, .drop:hover { background-color: #ccc; } .collapse { padding: 0 18px; background-color: gray; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; }

 <div id=panel> <div id="box1"> <br>this is box 1<br> <div class="collapse"> <p>a drop</p> </div> <button class="drop">view more</button> </div> <div id="box2" style="margin-bottom: 15px;"> <br>this is box 2<br> <div class="collapse"> <p>a drop</p> </div> <button class="drop">view more</button> </div> <div id="box4"> <br>this is box 4<br> <div class="collapse"> <p>a drop</p> </div> <button class="drop">view more</button> </div> <div id="box3" style="margin-top: 15px;"> <br>this is box 3<br> <div class="collapse"> <p>a drop</p> </div> <button class="drop">view more</button> </div> <div style="clear:both"></div> <div id="travel"> </div> </div>

Answer 2

这是一种使用display: flex的方法。 我还将盒子的常见样式移到了.box类中。

 var drop = document.getElementsByClassName("drop"); var i; for (i = 0; i < drop.length; i++) { drop[i].addEventListener("click", function() { this.classList.toggle("active"); var collapse = this.previousElementSibling; if (collapse.style.maxHeight) { collapse.style.maxHeight = null; } else { collapse.style.maxHeight = collapse.scrollHeight + "px"; } }); }

 #panel { background-color: white; position: relative; width: 800px; /* height: 500px; */ margin: 0 auto; border-color: #B7B7B7; border-width: 2px; border-radius: 25px; display: flex; flex-wrap: wrap; align-items: flex-start; } .box { border: 2px solid #B7B7B7; position: relative; transition: max-height 0.2s ease-out; margin-bottom: 15px; border-radius: 5px; } #box1 { width: 250px; } #box2 { width: 525px; } #box3 { width: 250px; } #box4 { width: 525px; } #travel { margin: auto; background-color: black; border-style: solid; border-color: #B7B7B7; border-width: 2px; border-radius: 5px; position: relative; width: 800px; height: 300px; } .drop { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; border-radius: 5px; bottom: 0; } .active, .drop:hover { background-color: #ccc; } .collapse { padding: 0 18px; background-color: gray; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; }

 <div id=panel> <div id="box1" class="box"> <br>this is box 1<br> <div class="collapse"> <p>a drop</p> </div> <button class="drop">view more</button> </div> <div id="box2" class="box"> <br>this is box 2<br> <div class="collapse"> <p>a drop</p> </div> <button class="drop">view more</button> </div> <div id="box4" class="box"> <br>this is box 4<br> <div class="collapse"> <p>a drop</p> </div> <button class="drop">view more</button> </div> <div id="box3" class="box"> <br>this is box 3<br> <div class="collapse"> <p>a drop</p> </div> <button class="drop">view more</button> </div> <div id="travel"> </div> </div>

Answer 3

首先，我可以看到您单独设置了这些框的样式，即使它们看起来基本相同。 该方法的一个问题是很难跟踪每个框特有的样式。 （只是对此做一些研究）

在这种情况下，主要问题是您在框 2 和框 4 中使用了float属性。使用 float 时，您需要另一个属性overflow来管理浮动的内容。 如果没有，它们可能会被视为不存在。

在您的小提琴中，您可以进行以下更改：

首先，清理你的html：

<div id=panel>
  <div class="boxes">
    <div class="left">
      <div class="box" id="box1">
        <br>this is box 1</br>
        <div class="collapse">
          <p>a drop</p>
        </div>
        <button class="drop">view more</button>
      </div>
      <div class="box" id="box3">
        <br>this is box 3</br>
        <div class="collapse">
          <p>a drop</p>
        </div>
        <button class="drop">view more</button>
      </div>
    </div>

    <div class="right">
      <div class="box" id="box2">
        <br>this is box 2</br>
        <div class="collapse">
              <p>a drop</p>
        </div>
        <button class="drop">view more</button>
      </div>
      <div class="box" id="box4">
        <br>this is box 4</br>
        <div class="collapse">
          <p>a drop</p>
        </div>
        <button class="drop">view more</button>
      </div>
    </div>
  </div>

  <div id="travel">

  </div>
</div>

请注意我如何删除不相关的内联样式。 在使用更大的应用程序时，太多的内容会使您的标记变得一团糟。 我还添加了类 - 一种防止不必要重复的很酷的方法。

现在，你的 css 这样会更干净：

.boxes {
  overflow: auto;
  margin-bottom: 10px;
}

.boxes .right {
  width: 525px;
  float: left;
  padding-left: 10px;
}

.boxes .left {
  width: 250px;
  float: left;
  padding-right: 10px;
}

.box {
  border: 2px solid #B7B7B7;
  position: relative;
    display: inline-block;
  border-radius: 5px;
  transition: max-height 0.2s ease-out;
  width: 100%;
  margin-bottom: 10px;
}

请注意我如何将overflow用于其子项具有浮动属性的任何 div。