ANKI HTML / CSS-如何移动文本，使其起源于文本框的右下角？

问题描述

这是在ANKI上，通过在浮动文本框中包含Source，我在Source周围有标签。我希望标签从屏幕的底部开始（就像源代码一样），但是没有任何作用。

TypeScript Handbook: Unions and Intersection Types 我正在尝试将标签放入红色突出显示的区域（在“源”旁边），但是遇到了困难，这是代码：

前端代码：

<section id="myFunnyBox">
{{#Tags}}
<b id="tags-container">{{Tags}}</b>
<script>
  var tagContainer = document.getElementById("tags-container")
  if (tagContainer.childElementCount == 0) {
    var tagList= tagContainer.innerHTML.split(" ");
    var kbdList = [];
    var newTagContent = document.createElement("div");


    for (var i = 0; i < tagList.length;  i++) {
      var newTag = document.createElement("kbd");
      newTag.innerHTML = tagList[i];
      newTagContent.append(newTag)
    }
    tagContainer.innerHTML = newTagContent.innerHTML;
    tagContainer.style.cursor = "default";
  }
</script></div></div>
{{/Tags}}
 <div id="bottomed"><i id="SourceTag">{{#Source}}<b><u>Source</b></u>: {{/Source}}</i>
<i id="Source">{{Source}}</i></div>
</section>

样式CSS：

font-family: Verdana;
font-size: 12px;
}


#Source {
font-family: Verdana;
font-size: 12px;
color: rgb(15,128,255);
}

body * {
  Box-sizing: border-Box;
}
#myFunnyBox {
position: fixed;
bottom: 0;
right: 0;
  width: 100%;
  overflow:hidden;
  text-align:justify;
  text-align:right;
}
#bottomed {
  float: left;
  clear: left;
  text-align: left;
width: 30%;
  margin-right:1em;
}

/* TAGS */
/* Clickable Tags (need to download the add-on) */
kbd {
  display: inline-block;
  letter-spacing: .2px;
  font-weight: bold;
  font-size: 12px !important;
  text-shadow: none !important;
  padding: 0.05rem 0.1rem !important;
  margin: 1px !important;
  border-radius: 4px;
  border-width: 1.5px !important;
  border-style: solid;
  background-color: transparent !important;
  Box-shadow: none !important;
  opacity: 0.5;
   word-break: break-all;
}


/* Tag Becomes More Visible On Hover */
kbd:hover { opacity: 1; transition: opacity 0.2s ease; }


/* Tag Colors */
kbd:nth-of-type(1n+0) { border-color: #fc00ff; color: #fc00ff;}
kbd:nth-of-type(2n+0) { border-color: #03A9F4; color: #03A9F4;}
kbd:nth-of-type(3n+0) { border-color: #FF0000; color: #FF0000;}
kbd:nth-of-type(4n+0) { border-color: #faed27; color: #faed27;}
kbd:nth-of-type(5n+0) { border-color: #FF9933; color: #FF9933}
kbd:nth-of-type(6n+0) { border-color: #ff6ec7; color: #ff6ec7; }
kbd:nth-of-type(7n+0) { border-color: #8ffcff; color: #8ffcff; }
kbd:nth-of-type(8n+0) { border-color: #ff009a; color: #ff009a; }
kbd:nth-of-type(9n+0)  { border-color: #39ff14; color: #39ff14; }
kbd:nth-of-type(10n+0) { border-color: #1b03a3; color: #1b03a3; }


/* Tag Mobile Adjustments */
.mobile kbd { opacity: .9; margin: 1px !important; display: inline-block; font-size: 14px !important; }
.mobile #tags-container {line-height:0.6rem; margin-left: 0px; }
/*Start of style added by resize image add-on. Don't edit directly or the edition will be lost. Edit via the add-on configuration */
.mobile .card img {height:unset  !important; width:unset  !important;}
/*End of style added by resize image add-on*/

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）