Как разместить div рядом с HTML5 canvas - PullRequest
Новая
       21

Как разместить div рядом с HTML5 canvas

1 голос
/ 12 октября 2019

Я пытаюсь создать веб-приложение для рисования и хочу расположить кнопку, чтобы изменить цвет кисти (в конце концов я изменю это на полосу). Как бы я расположил кнопку справа от холста.

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>

1 Ответ

1 голос
/ 12 октября 2019

<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

...