如何让两行文字固定在某个位置？

Question

我该如何实现

至此

调整浏览器大小时。供您参考，这些是带和弦的歌词。我想在歌词上方实现和弦的完全相同的固定位置，以使其响应。我正在使用 HTML、CSS。任何人，请帮助。

.lines {
    margin: 5px 0;
}

.lyrics,.notes {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    color: rgb(45, 45, 45);
    font-weight: 600;
}

.lines>span:first-child:after {
    content: "\A";
    white-space: pre-line;
}

.notes {
    color: rgb(0, 150, 0);
    background-color: rgb(241, 241, 241);
}

<div class="lines">
        <span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="notes">G</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="notes">Em</span></span>
        <span class="lyrics">Well, I found a girl, beautiful and sweet</span>
        </div>

        <div class="lines">
        <span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<span class="notes">C</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<span class="notes">D</span></span>
        <span class="lyrics">Oh, I never knew you were the someone waiting for me</span>
        </div>

Answer 1

这样...

(()=>  // IIFE code on load for lyrics presentation
  {
  const rgxCut   = /(?=\[)|(?<=\])/;

  document.querySelectorAll('div.lyrics p').forEach( pLine =>
    {
    let newP = pLine.textContent
    .replaceAll('] [',']&emsp;[')
    .split(rgxCut)
    .map( el =>
      {
      if (el[0]!=='[') return el
      let chord = el.substring(1,el.length-1)
      return `<span class="chord" data-chord="${chord}"></span>`
      })
    pLine.innerHTML = newP.join('')
    })
  }
)()

/* --- for testing --- */
body {
  font-family : Arial, Helvetica, sans-serif;
  font-size   : 20px;
  }
.reSizable {
  resize   : both;
  overflow : scroll;
  padding  : .5em;
  border   : 1px solid orange;
  }
/* ------------------- */

div.lyrics p  {
  line-height : 2.5em;
  }
div.lyrics p span[data-chord] {
  position : relative
  }
div.lyrics p span[data-chord]::after {
  position   : absolute;
  top         : -1.2em;
  left        : -.1em;
  line-height : 1.2em;
  padding     : 0 .2em;
  font-size   : .9em;
  color       : darkgreen;
  background  : lightgrey;  
  content     : attr(data-chord);
  }

<div class="reSizable">

    <div class="lyrics">
      <p>Well, I found a [G]girl, beauti[Em]full and sweet</p>
      <p>Oh, I never [C]knew you where the someone waiting for [D]me</p>
    </div>

</div>

如何让两行文字固定在某个位置？

How to get two lines of text fixed at positions?

html

css

media-queries

responsive