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 属性。 使用浮动时，您需要另一个属性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。