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

【问题标题】：HTML5 - how to align two canvases of different heights at the top?HTML5 - 如何在顶部对齐两个不同高度的画布？
【发布时间】：2015-06-03 21:43:03
【问题描述】：

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

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

如何让它们看起来像

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

我可以让它们的高度相同。但是在它们垂直堆叠的窄幅显示器上，两个画布之间会有额外的空间。

【问题讨论】：

您是在问如何将它们与顶部对齐？
是的。没有align: top 选项

标签： css html

【解决方案1】：

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

示例：

.container {
  border : 1px solid red;
}

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

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

【讨论】：

【解决方案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>

【讨论】：

尽量避免内联样式 Paul。
我总是这样做，除非我为演示强制使用不同的尺寸，并且我不想将演示特定的尺寸与实际解决问题的 CSS 混淆。

【解决方案3】：

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

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

【讨论】：

谢谢 - odedta。这行得通！顺便说一句，我不明白您对内联样式的评论背后的逻辑。
如果单独使用vertical-align: top;这个属性是不行的，必须加display:inline;或者display:inline-block;
@odedta，因为vertical-align 仅适用于内联级和表格单元格元素，这有什么问题？