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

Question

我有一个由多个div组成的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浮在右边时，在所有box之后都需要一个clear元素来清除浮动对象的效果。我在框后添加了<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用于其子项具有float属性的任何div。