Question

我正试图将这两个部分直接排到画布的底部，但是一个总是低于另一个，这取决于部分的大小。这是现在的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>

Answer 1

将vertical-align: top添加到section - 这就是您垂直对齐 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>

Answer 2

在课程 #info 和 #commands

中提供vertical-align:top

没有排到顶部的部分

2 个答案: