Question

我正在尝试添加一个使用HTML5画布到div的时钟。 canvas标签有一个ID，所以我试图将CSS标签位置，底部，右侧应用于id。我似乎无法让canvas标签的内容显示在父DIV的右下角。

HTML

<div id="Header">
<canvas id="clock"></canvas>
</div>

CSS

#Header {
    background-image: url(images/building.png);
    background-color: #FFFFFF;
    width: 780px;
    height: 399px;
    margin: 0;
    padding: 0px 0 0 0;
    position: relative;
}

#clock {
    width: 780px;
    height: 399px;
    bottom: 1px;
    right: 1px;
    position: absolute;
}

我尝试了各种各样的变化，但没有运气。

我还尝试删除id = clock的所有属性，而是用canvas标记封装canvas标记并应用相同的属性。没有运气。

当我创建一个具有相同CSS属性的div标签并删除canvas标签并仅用文本替换时，文本会根据需要显示在父div的右下角。

所以，似乎js代码中的东西正在为canvas标签提供导致定位问题的原因。不确定。

这是因为太多时间敲打键盘，搜索谷歌，试错等等。

非常感谢任何帮助。

如果你需要查看生成canvas标签内容的JS代码，请告诉我。我不想把它包括在内，除非它是必要的，因为我不想再把这个帖子弄得乱七八糟。

谢谢！

Answer 1

使用text-align和padding-top。例如：

#Header {
    border: 3px dotted red;
    text-align: right;
    padding-top: 200px;
}

#clock {
   border: 1px solid black  
}

<div id="Header">
<canvas id="clock"></canvas>
</div>

需要在右下方的css div中定位html5 canvas

1 个答案: