Question

我遇到了<div>从下面推升另一个<div>的问题。

基本上，上面的<div>是<canvas>定义的维度，下面是<div>，其中包含<p>元素。触发事件后，我正在使用innerHTML来更改<p>元素的内容。因此，<p>元素的内容从一行变为两行。但是，当发生这种情况时，<canvas>会被推到页面上。

我尝试使用不同的position CSS值，但因为我使用的是flexbox，这意味着两个div堆叠起来。

这是CSS和HTML：

.container {
  padding: 10px;
  height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.player {
  margin-bottom: 20px;
}

.textContainer {
  font-size: 24px;
  text-align: center;
}

<!DOCTYPE html>
<html>
  <head>
    <link href="style.css" rel="stylesheet" type="text/css">
    <script src="main.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="player">
        <canvas id="canvas"></canvas>
      </div>
      <div class="textContainer">
        <p id="moveText">Moves: 0</p>
      </div>
    </div>
  </body>
</html>

提前致谢！

防止增长的Div从上面推动Div

0 个答案: