Question

我在一个<div>内有两个画布。它们是不同的高度，似乎在底部对齐

          +-------+
          +       +
+-------+ +       +
+       + +       +
+-------+ +-------+

如何让它们看起来像

+-------+ +-------+
+       + +       +
+-------+ +       +
          +       +
          +-------+

我可以让它们达到同样的高度。但是在纵向堆叠的窄幅显示器上，两幅画布之间会有额外的空间。

Answer 1

float是一个解决方案，vertical-align是另一个inline-block（但请注意它们之间的空格）。

示例：

＆＃13;

.container {
  border : 1px solid red;
}

.container > * {
  display: inline-block;
  vertical-align: top;
  border: 1px solid blue; /* debug purposes */
}

＆＃13;

<div class="container">
  <canvas width="200" height="40"></canvas>
  <canvas width="200" height="100"></canvas>
</div>

＆＃13;

Answer 2

他们排在同一基线上，因为它们是inline元素。制作block元素（例如div，p等）并浮动它们。

在狭窄的屏幕上，它们仍会按预期堆叠。

canvas {
  /* for display purposes */
  border: 1px solid red;

  display: block;
  float: left;
}

.container {
  /* for display purposes */
  border: 1px solid blue;

  /* make sure we contain the floats */
  overflow: auto;
}

<div class="container">
  <canvas style="width: 80px; height: 50px"></canvas>

  <canvas style="width: 80px; height: 100px"></canvas>
</div>

Answer 3

canvas {
    display:inline-block; 
    vertical-align: top;
}

请注意，vertical-align的使用取决于display属性。

HTML5 - 如何在顶部对齐两个不同高度的画布？

3 个答案:

示例：