Как сделать так, чтобы текст плавал справа от холста?

Я пытался сделать так, чтобы текстовое поле (фиксированного размера) появилось прямо справа от холста (float right заставляет его заходить слишком далеко вправо), но не имел большого успеха. На данный момент текстовое поле отображается непосредственно над холстом.

HTML:

<body>
    <div class="wrapper">
        <div class="labelMaker"><label>Labs:</label></div>
        <canvas id="can" width="680" height="485"></canvas>
    </div>
</body>

стиль CSS:

.labelMaker {
    border:solid;
    width:150px;
    height:100;
}

.wrapper canvas {
    margin-right:15px;
    float:left;
}

Есть предложения, чтобы исправить это? Кроме того, я думал о том, чтобы поместить заголовок над холстом и текстовым полем, но беспокоился, что это повлияет на координаты на холсте, если я использую другое устройство с другими размерами или увеличил/уменьшил, так как если вы увеличиваете слишком много, текст сворачивается в новую строку. Будет ли это действительно проблемой или нет?

3 ответа

  1. Вы можете использовать display: flex;на родительском, а затем order: -1;на холсте, чтобы сделать его первым элементом в контейнере. Также применяется граница / ширина / высота .labelMakerto .labelMaker labelinstead, и назначается display: block;так, что это создаст макет лучше, чем встроенный элемент.

    canvas {
      background: #ccc;
    }
    
    .labelMaker label {
      border: solid;
      display: block;
      width: 150px;
      height: 100;
    }
    
    .wrapper canvas {
      margin-right: 15px;
    }
    
    .wrapper {
      display: flex;
    }
    
    canvas {
      order: -1;
    }
    <div class="wrapper">
        <div class="labelMaker"><label>Labs:</label></div>
        <canvas id="can" width="680" height="485"></canvas>
    </div>

  2. <body>
    <div id="left" style="float:left; margin-right: 5px;">
        <canvas id="can" width="680" height="485"></canvas>
    </div>
    <div id="left" style="float:left;">
         <div class="labelMaker"><label>Labs:</label></div>
    </div>
    <div style="clear:both;"></div>
    </body>
    
  3. <style type="text/css">
        .labelMaker{
            border:solid;
            width:150px;
            height:100;
            right: 170px;
            display: inline-block;
            float: right;
            position: relative;
        }
    
        .wrapper canvas {
             margin-right:180px;
            float:left;
        }
    
    </style>