html - 如何将日语文本与拉丁文本对齐

Question

所以我有一个 3 列伪表来显示歌词。第一列包含日文歌词，而其他两列分别显示罗马化和英文歌词。

我的问题是日语歌词与英语歌词不完全一致，因此看起来不均匀。它们都在正确的位置换行，而且我认为所有文本都设置为默认字体大小，所以我不确定解决方案是什么。

有没有更好的方法来格式化这些歌词？

.lyrics {
    margin: 1%;
    position: inherit;
    clear: right;
    display: inline-block;
}

.japanese-lyrics {
    float: left;
    width: auto;
    clear: left;
    display: inline;
    /*font-size: .796em;*/
}


.romanized-lyrics {
    float: left;
    width: auto;
    display: inline;
}

.english-lyrics {
    float: left;
    width: auto;
    display: inline;
}

<section class="lyrics">
            <div class="japanese-lyrics">
                <h3>日本語歌詞</h3>
                <p>透き通る手、砂雑じりの雪に	<br>
                    ひとすじの詩、描かれモノクロに、	<br>
                    焼き付いて、瞳から	<br>
                    離れない、	<br>
                    <br>
                    まだ	<br>
                    <br>
                    有り触れた、終焉の、言葉、	<br>
                    美しく、染まろうと揺れながら	<br>
                    裏切りと絶望を落とし、	<br>
                    コキュトスに煌めかせた	<br>
                    脈打つ河、輝く海、	<br>
                    その最期に僕らは佇む	<br>
                    <br>
                    遠ざかる手、凍り果てる街に	<br>
                    君の歌は、呼応し	<br>
                    響いてく	<br>
                    <br>
                    有り触れた、終焉の、言葉、	<br>
                    無慈悲さの、欠片から	<br>
                    生まれ得た　君の歌	<br>
                    君の歌　声が、響いては、	<br>
                    反射して永遠に	<br>
                    僕達を、僕と君だけを	<br>
                    閉ざし行く、緩やかに輪を描き	<br>
                    鳴り響く、メロディは、やがて	<br>
                    狂おしい、叫喚に、呑み込まれ	<br>
                    <br>
                    音楽を、<span class="whisper">（僕たちの音を）</span>	<br>
                    君の歌、<span class="whisper">（君の歌だけがまだ）</span>	<br>
                    紡ごうと、<span class="whisper">（紡ごうとしている）</span>	<br>
                    <br>
                    僕たちを、赦しあうために	<br>
                    <br>
                    そして、せかいは、ひらかれてゆく	</p>
            </div>
            <div class="romanized-lyrics">
                <h3>Romanized Lyrics</h3><p>sukitooru te, suna majiri no yuki ni	<br>
                    hitosuji no shi, egakare monokuro ni,	<br>
                    yakitsuite, hitomi kara	<br>
                    hanarenai	<br>
                    <br>
                    mada	<br>
                    <br>
                    arifureta, shuuen no, kotoba,	<br>
                    utsukushiku, somarou to yurenagara	<br>
                    uragiri to zetsubou wo otoshi,	<br>
                    kokyutosu ni kiramekaseta	<br>
                    myakuutsu kawa, kagayaku umi	<br>
                    sono saigo ni bokura wa tatazumu	<br>
                    <br>
                    touzakaru te, kouri hateru machi ni	<br>
                    kimi no uta wa koou shi	<br>
                    hibiiteku	<br>
                    <br>
                    arifureta, shuuen no, kotoba,	<br>
                    mujihi sa no, kakera kara	<br>
                    umare eta kimi no uta	<br>
                    kimi no uta koe ga, hibiite wa,	<br>
                    hansha shite eien ni	<br>
                    bokutachi wo, boku to kimi dake wo	<br>
                    tozashi iku, yuruyaka ni wa wo egaki	<br>
                    narihibiku, merodi wa, yagate	<br>
                    kuruoshii, kyoukan ni, nomikomare	<br>
                    <br>
                    ongaku wo, <span class="whisper">(bokutachi no on wo)</span>	<br>
                    kimi no uta, <span class="whisper">(kimi no uta dake ga mada)</span>	<br>
                    tsumugouto, <span class="whisper">(tsumugouto shite iru)</span>	<br>
                    <br>
                    bokutachi wo, yueushiau tameni	<br>
                    <br>
                    soshite, sekai wa, hirakareteyuku	</p>
            </div>
            <div class="english-lyrics">
                <h3>English Translyrics</h3>
                <p>
                    Snow falls and passes through my hazy hands like grains of sand.<br>
                    While reading poetry, I start to see the monochrome lines<br>
                    Burn into my eyes. However I try,<br>
                    They just won’t fade<br>
                    <br>
                    Away.<br>
                    <br>
                    Unremarkably, the words that I speak lose their worth.<br>
                    Beautifully, stains start to repeat. My body shakes as<br>
                    All the treachery and unhappiness evaporates<br>
                    ‘til Cocytus is shimmering under its weight.<br>
                    The stream begins to drum, the sea gleams from the sun,<br>
                    But in the finale, we just completely stand still.<br>
                    <br>
                    Right at the city’s edge, the chilling cold seeps through lonely hands.<br>
                    Your voice rings loud and clear before I hear<br>
                    Your echo resound.<br>
                    <br>
                    Unremarkably, the words that you speak lose their worth.<br>
                    Unforgivingly, ugly fragments bleed.<br>
                    From there is where these tunes of yours had bloomed,<br>
                    Where your voice consumed all of me. Humming quietly,<br>
                    It reverberates on endlessly.<br>
                    Circling you and I, spiteful secrets hide and multiply.<br>
                    If we close our eyes, if we paint ourselves a beautiful lie,<br>
                    We will certainly hear its melody eventually.<br>
                    Unbelievably, with a silent scream it’ll overwhelm me.<br>
                    <br>
                    Listening to these words, <span class="whisper">(Listening to the words we had said,)</span><br>
                    Listening to your song, <span class="whisper">(Playing all the songs that you had written,)</span><br>
                    I will still spin. <span class="whisper">(It will still spin, forevermore.)</span><br>
                    <br>
                    For the both of us, everything will be forgiven briefly.<br>
                    <br>
                    And so then the world will start to suddenly bloom anew.</p>
                </div>
        </section>

Answer 1

.lyrics > div { line-height: 25px; }

.lyrics {
  margin: 1%;
  position: inherit;
  clear: right;
  display: inline-block;
}
.lyrics > div {
  line-height: 25px;
}
.japanese-lyrics {
  float: left;
  width: auto;
  clear: left;
}
.romanized-lyrics {
  float: left;
  width: auto;
}
.english-lyrics {
  float: left;
  width: auto;
}

<section class="lyrics">
  <div class="japanese-lyrics">
    <h3>日本語歌詞</h3>
    <p>透き通る手、砂雑じりの雪に
      <br>ひとすじの詩、描かれモノクロに、
      <br>焼き付いて、瞳から
      <br>離れない、
      <br>
      <br>まだ
      <br>
      <br>有り触れた、終焉の、言葉、
      <br>美しく、染まろうと揺れながら
      <br>裏切りと絶望を落とし、
      <br>コキュトスに煌めかせた
      <br>脈打つ河、輝く海、
      <br>その最期に僕らは佇む
      <br>
      <br>遠ざかる手、凍り果てる街に
      <br>君の歌は、呼応し
      <br>響いてく
      <br>
      <br>有り触れた、終焉の、言葉、
      <br>無慈悲さの、欠片から
      <br>生まれ得た　君の歌
      <br>君の歌　声が、響いては、
      <br>反射して永遠に
      <br>僕達を、僕と君だけを
      <br>閉ざし行く、緩やかに輪を描き
      <br>鳴り響く、メロディは、やがて
      <br>狂おしい、叫喚に、呑み込まれ
      <br>
      <br>音楽を、
      <span class="whisper">（僕たちの音を）</span>	
      <br>君の歌、
      <span class="whisper">（君の歌だけがまだ）</span>	
      <br>紡ごうと、
      <span class="whisper">（紡ごうとしている）</span>	
      <br>
      <br>僕たちを、赦しあうために
      <br>
      <br>そして、せかいは、ひらかれてゆく</p>
  </div>
  <div class="romanized-lyrics">
    <h3>Romanized Lyrics</h3>
    <p>sukitooru te, suna majiri no yuki ni
      <br>hitosuji no shi, egakare monokuro ni,
      <br>yakitsuite, hitomi kara
      <br>hanarenai
      <br>
      <br>mada
      <br>
      <br>arifureta, shuuen no, kotoba,
      <br>utsukushiku, somarou to yurenagara
      <br>uragiri to zetsubou wo otoshi,
      <br>kokyutosu ni kiramekaseta
      <br>myakuutsu kawa, kagayaku umi
      <br>sono saigo ni bokura wa tatazumu
      <br>
      <br>touzakaru te, kouri hateru machi ni
      <br>kimi no uta wa koou shi
      <br>hibiiteku
      <br>
      <br>arifureta, shuuen no, kotoba,
      <br>mujihi sa no, kakera kara
      <br>umare eta kimi no uta
      <br>kimi no uta koe ga, hibiite wa,
      <br>hansha shite eien ni
      <br>bokutachi wo, boku to kimi dake wo
      <br>tozashi iku, yuruyaka ni wa wo egaki
      <br>narihibiku, merodi wa, yagate
      <br>kuruoshii, kyoukan ni, nomikomare
      <br>
      <br>ongaku wo, <span class="whisper">(bokutachi no on wo)</span>	
      <br>kimi no uta, <span class="whisper">(kimi no uta dake ga mada)</span>	
      <br>tsumugouto, <span class="whisper">(tsumugouto shite iru)</span>	
      <br>
      <br>bokutachi wo, yueushiau tameni
      <br>
      <br>soshite, sekai wa, hirakareteyuku</p>
  </div>
  <div class="english-lyrics">
    <h3>English Translyrics</h3>
    <p>
      Snow falls and passes through my hazy hands like grains of sand.
      <br>While reading poetry, I start to see the monochrome lines
      <br>Burn into my eyes. However I try,
      <br>They just won’t fade
      <br>
      <br>Away.
      <br>
      <br>Unremarkably, the words that I speak lose their worth.
      <br>Beautifully, stains start to repeat. My body shakes as
      <br>All the treachery and unhappiness evaporates
      <br>‘til Cocytus is shimmering under its weight.
      <br>The stream begins to drum, the sea gleams from the sun,
      <br>But in the finale, we just completely stand still.
      <br>
      <br>Right at the city’s edge, the chilling cold seeps through lonely hands.
      <br>Your voice rings loud and clear before I hear
      <br>Your echo resound.
      <br>
      <br>Unremarkably, the words that you speak lose their worth.
      <br>Unforgivingly, ugly fragments bleed.
      <br>From there is where these tunes of yours had bloomed,
      <br>Where your voice consumed all of me. Humming quietly,
      <br>It reverberates on endlessly.
      <br>Circling you and I, spiteful secrets hide and multiply.
      <br>If we close our eyes, if we paint ourselves a beautiful lie,
      <br>We will certainly hear its melody eventually.
      <br>Unbelievably, with a silent scream it’ll overwhelm me.
      <br>
      <br>Listening to these words, <span class="whisper">(Listening to the words we had said,)</span>
      <br>Listening to your song, <span class="whisper">(Playing all the songs that you had written,)</span>
      <br>I will still spin. <span class="whisper">(It will still spin, forevermore.)</span>
      <br>
      <br>For the both of us, everything will be forgiven briefly.
      <br>
      <br>And so then the world will start to suddenly bloom anew.</p>
  </div>
</section>