Question

我有 2 个具有相同类的 div，当我向其中一个添加内容时，另一个的高度也会发生变化。

function addContent() {
    document.getElementsByClassName('list')[1].innerHTML += "<h1>test</h1>"
}

.container {
  width: 79%;
  margin: 0 auto;
}

.bansContainer {
  display: flex;
  margin: 25px 0;
  overflow: auto;
  justify-content: space-between;
}

.list {
  background-color: #436935;
}

<div class="container">
  <div class="bansContainer">
    <div class="list">
      <h1>
        left
      </h1>
    </div>

    <div>
      <h1 class="list">
        right
      </h1>
      <button onclick=addContent()>Click</button>
    </div>
  </div>
</div>

如何更改/更新它，以便仅更改添加内容的 div 的高度？

Answer 1

function addContent() {
    document.getElementsByClassName('list')[1].innerHTML += "<h1>test</h1>"
}

.container {
  width: 79%;
  margin: 0 auto;
}

.bansContainer {
  display: flex;
  margin: 25px 0;
  overflow: auto;
  justify-content: space-between;
}

.list {
  background-color: #436935;
align-self: flex-start;
}

<div class="container">
  <div class="bansContainer">
    <div class="list">
      <h1>
        left
      </h1>
    </div>

    <div>
      <h1 class="list">
        right
      </h1>
      <button onclick=addContent()>Click</button>
    </div>
  </div>
</div>

Answer 2

这是因为您没有在第一列上指定高度，它会继续调整其父 div 又名 bansContainer 的高度。所以这里有两种方法。一种是添加 align-self: flex-start; 或指定列的高度。

function addContent() {
    document.getElementsByClassName('list')[1].innerHTML += "<h1>test</h1>"
}

.container {
  width: 79%;
  margin: 0 auto;
}

.bansContainer {
  display: flex;
  margin: 25px 0;
  overflow: auto;
  justify-content: space-between;
}

.list {
  background-color: #436935;
  /*align-self: flex-start;*/
}
.n-h {
  height: fit-content;
}

<div class="container">
  <div class="bansContainer">
    <div class="list n-h">
      <h1>
        left
      </h1>
    </div>

    <div>
      <h1 class="list">
        right
      </h1>
      <button onclick=addContent()>Click</button>
    </div>
  </div>
</div>

一个 div 的高度影响另一个

2 个答案: