我正在尝试使特定布局正常工作，但遇到了问题。我想要的布局是两个 Canvas ，彼此堆叠并向左对齐，两个 div 也彼此堆叠并在堆叠 Canvas 的旁边和右侧水平对齐。为此，我有 2 个 div 容器，一个用于堆叠 Canvas ，一个用于堆叠 div。这 2 个容器向左浮动。
我希望看到的是:
+------------+--------+
| canvas | div |
| +--------+
+------------+ div |
| canvas +--------+
| |
+------------+
我遇到的问题是堆叠的 div 移动到堆叠的 Canvas 下方。另外，容纳 Canvas 的容器被拉伸(stretch)到右边缘，填充 Canvas 右侧的区域，我希望堆叠的 div 出现。即使 Canvas 右侧有足够的空间容纳堆叠的 div，也是如此。
我实际得到的是这样的:
+------------+ - - - - - - +
| canvas | canvas |
| | container
+------------+ |
| canvas |
| | |
+--------+---+ - - - - - - +
| div |
+--------+
| div |
+--------+
如果我将 Canvas 更改为 div，那么我得到的正是我想要和期望的(除了没有 Canvas )!所以，这让我想问，使我的布局失败的 Canvas 元素有什么不同？布局 canvas 元素是否有特殊注意事项？在 float 元素中是否需要区别对待 Canvas ？示例标记/CSS 如下:
HTML:
<body>
<div class="container">
<div class="canvases" style="background: yellow">
<!--
<div class="myCanvas" style="background: #606060"></div>
<div class="myCanvas" style="background: #808080"></div>
-->
<canvas class="myCanvas" style="background: #606060"></canvas>
<canvas class="myCanvas" style="background: #808080"></canvas>
</div>
<div class="numbers" style="background: red">
<div class="pValue" style="background: #606060">1234</div>
<div class="pValue" style="background: #808080">4321</div>
</div>
</div>
</body>
CSS:
body
{
background: black;
}
.canvases
{
float: left;
}
.myCanvas
{
width: 200px;
height: 100px;
}
.numbers
{
float: left;
width: 100px;
}
.pValue
{
border: 2px solid #a0a0a0;
border-radius: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
font: bold 28pt Calibri;
}
如果您想尝试此操作，只需在 HTML 中将 Canvas 与 div 切换(它们已被注释掉)，以查看 div 如何代替 Canvas 工作。感谢您提供的任何帮助。
最佳答案
默认情况下，canvas 有 css display: inline-block; 而 div 有 display: block;
关于html - 使用 float with canvas 的 CSS 布局问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22795086/