javascript - 是否可以使用 CSS 以类似表格的方式对齐这些 div/spans？ (同时仍保持连续性)

Question

我有

<div class='line'> 
  <div class='chord_line'> 
    <span class='chord_block'></span> 
    <span class='chord_block'>E</span> 
    <span class='chord_block'>B</span> 
    <span class='chord_block'>C#m</span> 
    <span class='chord_block'>A</span> 
  </div> 
  <div class='lyric_line'> 
    <span class='lyric_block'></span> 
    <span class='lyric_block'>Just a</span> 
    <span class='lyric_block'>small-town girl</span> 
    <span class='lyric_block'>living in a</span> 
    <span class='lyric_block'>lonely world</span> 
  </div> 
</div>

(请原谅我不太熟悉何时使用 div/spans 的正确 css 约定)

我希望能够显示它们，以便每个 chord_block span 和 lyric_block span 垂直对齐，就好像它们是左对齐的并且在同一行一张 table 。例如:

  E      B               C#m         A  Just a small-town girl living in a lonely world

(经常会出现空和弦 block 与非空歌词 block 匹配的情况，反之亦然。)

我完全不熟悉使用 CSS 来对齐事物，除了更改背景颜色和链接样式之外，我对 CSS 没有真正的理解/经验。这在 CSS 中可能吗？如果不是，如何修改 div/class 嵌套结构以使其成为可能？如有必要，我可以将跨度更改为 div。

有些东西我不能用:

• 我无法更改结构以按 chord_and_lyric_block div 对事物进行分组(并将它们的宽度拉伸(stretch)到歌词的长度，并水平堆叠它们)，因为我真的不能 < strong>完整地连续复制/选择歌词台词，这一点非常关键。
• 我试图避免使用类似表格的解决方案，因为这些数据根本不是表格形式的。和弦线和歌词线应该被解读为一条连续的线，而不是一组单元格。另外，除了设计理念的原因外，我认为它可能存在与之前的要点相同的问题。

如果可能，我应该使用哪些 div/span 属性？你能提供示例 css 吗？

如果这不可能，是否可以使用 javascript 完成？

编辑:很抱歉我一开始并不清楚，但我想要一个允许和弦线和歌词线都“可选择”和连续的解决方案。

Answer 1

原始尝试... ---> CSS Tables Demonstration

div.line {
     display:table;   
}

div.line > div {
     display:table-row;   
}

div.line > div span {
     display:table-cell;
     vertical-align:middle;   
}

对于空 block ，将不间断空格的 html 实体作为其内容。这应该做你想要的，如果不是，那么我可能误解了。

特别说明: display:table-* 的兼容性有限。 More information

新示例:很确定这就是您要查找的内容。 ---><强> Demonstration

CSS

.block {
    margin-top:1.5em;
    position:relative;
    display:inline-block;
}

.block .chord {
    font-weight:bold;
    font-size:0.8em;
    position:absolute;
    top:-1em;
}

HTML

<div class="block">
    <div class="chord"></div>
    <div class="lyric"></div>
</div>

<div class="block">
    <div class="chord">E</div>
    <div class="lyric">Just a</div>
</div>

<div class="block">
    <div class="chord">B</div>
    <div class="lyric">small-town girl</div>
</div>

<div class="block">
    <div class="chord">C#m</div>
    <div class="lyric">living in a</div>
</div>

<div class="block">
    <div class="chord">A</div>
    <div class="lyric">lonely world</div>
</div>