如何让文本浮动到canvas的右边？

Question

我一直在尝试使文本框（固定大小）直接出现在 canvas 的右侧（向右浮动会使它向右移动太远），但没有取得太大成功.截至目前，文本框一直直接出现在 canvas.

上方

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;
}

有什么解决这个问题的建议吗？此外，我正在考虑在 canvas 和文本框上方放置一个 header，但担心如果我使用不同尺寸的不同设备，这会影响 canvas 上的坐标，或者zoomed in/out 因为如果缩放太多，文本会换行。这真的是个问题吗？

Answer 1

您可以在父元素上使用 display: flex;，然后在 canvas 上使用 order: -1;，使其成为容器中的第一个元素。还将 .labelMaker 的 border/width/height 应用到 .labelMaker label，并分配 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>

Answer 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>

Answer 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>

如何让文本浮动到canvas的右边？

How to make text float to the right of a canvas?

html

css

textbox

canvas

css-float