如何将 div 放在 HTML5 canvas 旁边

Question

我正在尝试创建一个基于 Web 的绘画软件，并希望放置一个按钮来更改画笔的颜色（我最终会将其更改为一个条）。我如何将按钮放置在 canvas.

的右侧

Html 和 css:

<!DOCTYPE html>
<html lang = "en">
<head>
    <title>Paint</title>
    <style>
        #canvas{
            background-color: cadetblue;
        }
        .button{
           /* code to position button next to canvas */
        }

    </style>
</head>
<body>
    <canvas id = "canvas" width = "800" height = "600"></canvas>
    <div class = "button">RED</div>
</body>
</html>

Answer 1

<canvas> 只是一个普通的块元素，所以你可以定位它，但是你会定位一个块元素。您可以在 canvas 和按钮上应用 float:left（请使用真正的 <button>），您可以 display:inline-block 它们，您可以在它们周围添加包装器 display: flex 它，甚至 display: grid 它或向它添加 position: relative 并向其子项添加 position: absolute 。有很多方法可以实现这一目标。这是一个很好的起点：https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction

如何将 div 放在 HTML5 canvas 旁边

How to position div next to HTML5 canvas

html

css

browser

position

styling