javascript - 部分未排列到顶部

我现在正在尝试将这两个部分排到 Canvas 的底部，但一个总是比另一个低，具体取决于该部分的大小。这是现在的 CSS。我想将它们排在顶部。

#canvas {
  display: block;
}

#info {
  display: inline-block;
  margin-top: 0px;
  text-overflow: clip;
  overflow: hidden;
}

#commands {
  display: inline-block;
  text-align: center;
  width: 500px auto;
}

#devTools {
  width: 1500px;
  background-color: aqua;
  position: relative;
}

section {
  width: 200px;
  background-color: grey;
}

<body>
  <!--TODO: Adjust the size of the canvas to fit the window-->
  <canvas id="canvas" width="1500" , height="600"></canvas>

  <!--TODO: Create buttons for all devtools under the canvas-->
  <!--TODO: Make a container for all devtools under the canvas, then add all the functionality to it after-->
  <div id="devTools">
    <section id="info">
      <p>Info</p>
      <p>Creature Number: </p>
      <p>Selected: </p>
    </section>

    <section id="commands">
      <p>Commands</p>
      <button class="button">Click me!</button>
      <button class="button">Click me!</button>
      <button class="button">Click me!</button>
      <button class="button">Click me!</button>
    </section>
  </div>
  <script src="scripts/script.js"></script>
</body>

最佳答案

将 vertical-align: top 添加到 section - 这就是您的垂直align inline-block 元素的方式 -请参阅下面的演示:

#canvas {
  display: block;
}

#info {
  display: inline-block;
  margin-top: 0px;
  text-overflow: clip;
  overflow: hidden;
}

#commands {
  display: inline-block;
  text-align: center;
  width: 500px auto;
}

#devTools {
  width: 1500px;
  background-color: aqua;
  position: relative;
}

section {
  width: 200px;
  background-color: grey;
  vertical-align: top;
}

<body>
  <!--TODO: Adjust the size of the canvas to fit the window-->
  <canvas id="canvas" width="1500" , height="600"></canvas>

  <!--TODO: Create buttons for all devtools under the canvas-->
  <!--TODO: Make a container for all devtools under the canvas, then add all the functionality to it after-->
  <div id="devTools">
    <section id="info">
      <p>Info</p>
      <p>Creature Number: </p>
      <p>Selected: </p>
    </section>

    <section id="commands">
      <p>Commands</p>
      <button class="button">Click me!</button>
      <button class="button">Click me!</button>
      <button class="button">Click me!</button>
      <button class="button">Click me!</button>
    </section>
  </div>
  <script src="scripts/script.js"></script>
</body>

关于javascript - 部分未排列到顶部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45792810/

javascript - 部分未排列到顶部

上一篇：javascript - 如何将数组值设置为 ";"分隔值

下一篇：React/Redux 中的 Javascript 函数语法