Question

我一直试图让一个文本框（固定大小）直接出现在画布右侧（向右浮动使它向右移动太远），但是没有取得多大成功。截至目前，文本框始终显示在画布上方。

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

有任何解决此问题的建议吗？另外，我想在画布和文本框上面放一个标题，但是担心如果我使用不同尺寸的不同设备或放大/缩小，这会影响画布上的坐标，因为如果放大太多，文本包装成一个新行。这实际上是不是一个问题？

Answer 1

您可以在父级上使用display: flex;，然后在画布上使用order: -1;，使其成为容器中的第一个元素。同时将.labelMaker的边框/宽度/高度应用于.labelMaker label，并指定display: block;，以便创建比内联元素更好的布局。

＆＃13;

canvas {
  background: #ccc;
}

.labelMaker label {
  border: solid;
  display: block;
  width: 150px;
  height: 100;
}

.wrapper canvas {
  margin-right: 15px;
}

.wrapper {
  display: flex;
}

canvas {
  order: -1;
}

＆＃13;

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

＆＃13;

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

df.columns = ["col1", "col2"]

如何使文本浮动到画布的右侧？

3 个答案: