0

我正在尝试将使用 HTML5 画布的时钟添加到 div。画布标签有一个 ID，所以我尝试将 CSS 标签位置、底部、右侧应用到 id。我似乎无法让画布标签的内容显示在父 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 的所有属性，而是用父标签封闭画布标签并应用相同的属性。没运气。

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

因此，似乎 js 代码中提供 canvas 标签的某些东西是导致定位问题的原因。没有把握。

在这上面呆了太多小时，我的头敲在键盘上，搜索谷歌，反复试验等。

非常感激任何的帮助。

如果您需要查看生成 canvas 标签内容的 JS 代码，请告诉我。除非需要，否则我不想立即将其包含在内，因为我不想使帖子进一步混乱。

谢谢！

4

1 回答 1

0

使用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>

于 2017-09-28T06:37:20.550 回答