enter image description here

Saya mencoba untuk melapisi kedua bagian ini ke bagian bawah kanvas sekarang, tetapi yang satu selalu lebih rendah dari yang lain, tergantung pada seberapa besar bagian itu. Ini adalah CSS sekarang. Saya ingin menempatkan mereka berdua di atas.

#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>
1
Chenny 21 Agustus 2017, 11:46

2 jawaban

Jawaban Terbaik

Tambahkan vertical-align: top ke section - begitulah elemen sejajarkan inline-block secara vertikal - lihat demo di bawah:

#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>
3
kukkuz 21 Agustus 2017, 08:51

Berikan vertical-align:top di kedua kelas #info dan #commands

1
ankita patel 21 Agustus 2017, 08:51