html - 具体的 css 处方

Question

我需要针对特定​​问题的 CSS 处方。我创建了图像以便更好地理解。

我将文本(歌词)分成单独的字符。每个字符都包含在 span.offset 中。 Angular 色可以附加一个和弦。和弦必须显示在相关字符上方。我要存档的是 span.offset 会将其宽度调整为更宽的偏移量或字符跨度之一。

我想出了以下药方

html:

<p class="line">
    <span class="offset">
        <span class="chord">Am</span>
        <span class="char">A</span>
    </span>
    ...
</p>

CSS:

p.line {
    width: 100%;
}

span.offset {
    float: left;
    position: relative;
}

span.chord {
    float: left;
    position: relative;
    top: -1.5em;
}

span.char {
    float: left;
    position: absolute;
    left: 0;
}

这仅针对 span.chord 宽度进行调整。如果没有和弦，字符将自行叠加。

是否可以归档我需要的行为？谢谢。

Answer 1

问题:

• offset 可能包含也可能不包含chord 元素
• char 在任何一种情况下都必须与底部对齐
• 绝对定位不能用于顶部/底部对齐，因为宽度必须与更宽的 child 的宽度相同

解决方法:

• 为和弦元素创造空间，无论它是否存在
• 将 chord 元素向左浮动并使用负边距将其推到 char 元素上方

p {
  overflow: hidden;
  background: #FF0;
}
.offset {
  float: left;
  padding-top: 1.5em;
  margin-right: 1em;
  background: #FC0;
}
.chord {
  float: left;
  margin-top: -1.5em;
  background: #0FC;
}
.char {
  display: block;
  background: #0CC;
}

<p class="line">
  <span class="offset">
    <span class="chord">Am</span>
    <span class="char">A</span>
  </span>
  <span class="offset">
    <span class="chord">A</span>
    <span class="char">Am</span>
  </span>
  <span class="offset">
    <span class="char">A</span>
  </span>
</p>