所以我有一个 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>最佳答案
.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>关于html - 如何将日语文本与拉丁文本对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37731741/