javascript - 亲子关系不正常 | 亲子关系不正常

我不太确定如何表达我的问题，请原谅我。我的计划是创建由字母“ Hello World”组成的巨型图像。我想将这些单词嵌套在大盒子里，后来决定让每个单词都放在一个小盒子里。在图片中，我创建了一个小盒子（尺寸尚未永久设置，我只是在测试）。但是，当我创建第二个小盒子时，它飞出了大盒子。在我的index.html文件中，第二个小盒子的<div>嵌套在大盒子div内。

这是代码：

INDEX.HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <script src="script.js"></script>

    <div class = "box">

      <div class = "hello-box"></div>

        <div class = "h-left"></div>

        <div class = "h-mid"></div>

        <div class = "h-right"></div>

      </div>

      <div class = "world-box">

      </div>

    </div>

  </body>
</html>

样式


body {
  background-color: skyblue;
}

.box {
  position: relative;
  margin: auto;
  margin-top: 15%;
  display: block;
  border: 3px solid black;
  width: 800px;
  height: 500px;
}

.hello-box {
  position: relative;
  margin: auto;
  margin-top: 125px;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

.world-box {
  position: relative;
  margin: auto;
  margin-top: 125px;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

结果

任何帮助将不胜感激！！！

最佳答案

.flex-container {
  display: flex;
  flex-wrap: nowrap;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <script src="script.js"></script>

    <div class="flex-container">
      <div>H</div>
      <div>E</div>
      <div>L</div>
      <div>L</div>
      <div>O</div>
      <div>W</div>
      <div>O</div>
      <div>R</div>
      <div>L</div>
      <div>D</div>
      <div>!</div>
    </div>
  </body>
</html>

使用flexbox

关于javascript - 亲子关系不正常，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58703367/