Question

#statDiv {
  position: relative;
  left: 0;
  height: 10%;
  width: 100%:
}


}
#gameCount {
  text-align: center;
}
#player1Score {
  text-align: left;
}
#score1Div {
  float: left;
  width: 33%;
  height: 10%;
  background-color: blue;
}
#countDiv {
  float: left;
  width: 33%;
  height: 10%;
  background-color: red;
}
#score2Div {
  float: left;
  width: 33%;
  height: 10%;
  background-color: green;
}
#player1Div {
  float: left;
  width: 50%;
  height: 100%;
  background-color: blue;
}
#player2Div {
  float: left;
  width: 50%;
  height: 100%;
  background-color: green;
}
#arenaDiv {
  position: relative;
}

<!DOCTYPE html>
<html>

<head>
  <title>practice</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="practice" />
  <meta name="keywords" content="practice" />
  <meta name="author" content=", 11/05/2019" />
</head>

<body>
  <div id="statDiv">
    <div id="score1Div">
      <p id="player1Score">1</p>
    </div>
    <div id="countDiv">
      <p id="gameCount">H</p>
    </div>
    <div id="score2Div">
      <p id="player1Score">2</p>
    </div>
  </div>
  <div id="arenaDiv">
    <div id="player1Div">
      <p id="gameCount">H</p>
    </div>
    <div id="player2Div">
      <p id="player1Score">2</p>
    </div>
  </div>
</body>

</html>

我第一次尝试使用float，但是没有用，所以现在我尝试使用div的头寸，但我不知道问题出在哪里。我的目标是将第二个主要的div（arenaDiv）放在第一个主要的div（statDiv）之下，但是它不起作用，因为它就像将所有div合并在一起，或者基本上两个div相互重叠。我应该为每个div使用哪个位置，以便将另一个放置在第一个位置下？

Answer 1

#statDiv {
  height: 10%;
}
#statDiv,
#arenaDiv {
    margin-bottom: 10px;
    position: relative;
    float: right;
    width: 100%;
}

}
#gameCount {
  text-align: center;
}
#player1Score {
  text-align: left;
}
#score1Div {
  float: left;
  width: 33%;
  height: 10%;
  background-color: blue;
}
#countDiv {
  float: left;
  width: 33%;
  height: 10%;
  background-color: red;
}
#score2Div {
  float: left;
  width: 33%;
  height: 10%;
  background-color: green;
}
#player1Div {
  float: left;
  width: 50%;
  height: 100%;
  background-color: blue;
}
#player2Div {
  float: left;
  width: 50%;
  height: 100%;
  background-color: green;
}

  <div id="statDiv">
    <div id="score1Div">
      <p id="player1Score">1</p>
    </div>
    <div id="countDiv">
      <p id="gameCount">H</p>
    </div>
    <div id="score2Div">
      <p id="player1Score">2</p>
    </div>
  </div>
  <div id="arenaDiv">
    <div id="player1Div">
      <p id="gameCount">H</p>
    </div>
    <div id="player2Div">
      <p id="player1Score">2</p>
    </div>
  </div>

在#statDiv中删除left: 0;并改用它：

#statDiv,
#arenaDiv {
    margin-bottom: 10px;
    position: relative;
    float: right;
    width: 100%;
}

Answer 2

尝试：

#arenaDiv {
  position: relative;
  top : 1% 

}

也请尝试position: absolute;的第一个<div>

如何将此div置于另一个div下？

2 个答案: