具体的css处方

Question

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

我将文字（歌词）分成单个字符。每个字符都包含在span.offset中。角色可以附加一个和弦。和弦必须显示在相关字符上方。我要归档的是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

问题：

• 偏移可能包含也可能不包含和弦元素
在任何一种情况下，
• 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>