Question

我正在努力让特定的布局正常运行并遇到问题。我想要的布局是两个画布，彼此堆叠并对齐到左边，两个div也堆叠在一起，并且在堆叠的画布的旁边和右边水平对齐。为此，我有2个div容器，一个用于堆叠的画布，另一个用于堆叠的div。这两个容器向左浮动。

我期望看到的是：

+------------+--------+
| canvas     | div    |
|            +--------+
+------------+ div    |
| canvas     +--------+
|            |
+------------+

我遇到的问题是堆叠的div移动到堆叠的画布下方。另外，保持画布的容器被拉伸到右边缘，填充画布右侧的区域，在那里我预期堆叠的div出现。即使画布右侧有叠放的div，也有足够的空间。

我实际得到的是：

+------------+ - - - - - - +
| canvas     | canvas      |
|            | container   
+------------+             |
| canvas     |             
|            |             |
+--------+---+ - - - - - - +
| div    |
+--------+
| div    |
+--------+

如果我将画布改为div，那么我会得到我想要的和预期的（除了没有画布）！所以，这让我想问，画布元素的不同之处在于我的布局失败了吗？布置画布元素是否有特殊考虑因素？在漂浮的元素中，画布需要区别对待吗？示例标记/ 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中切换带有div的画布（它们被注释掉），看看div是如何代替画布的。感谢您的帮助。

Answer 1

默认情况下，canvas有css display: inline-block;而div有display: block;

使用float with canvas的CSS布局问题

1 个答案: