3

歌詞とそれに対応する翻訳ストローフィをHTMLで表現するにはどうすればよいですか?

ほんの一例:

Может、поздно、может、слишкомрано、多分、手遅れか、多分、早い、
Иочемнедумалмноголет、それは何年もの間私には起こりませんでした、
ПоходитьясталнаДон-Жуана、私は今ドンファンに似ています、本当に、
Какзаправскийветреныйпоэт。詩の適切な軽快な男のように。

SEOフレンドリーでセマンティックな方法でそれを表現する方法は?

PS私はテーブルを使ったソリューションが本当に嫌いで、元の行を入れて1つのコンテナーに翻訳したくありません(グーグルにとっては醜くて悪いと思います)。

4

5 に答える 5

4
于 2009-08-12T20:11:08.203 に答える
2

divを使用します。歌詞の各セットをdivタグに入れてから、CSSを使用して2つのdivを並べてフォーマットします。

.lyrics {
 float: left;
}

同じことを行うCSSテクニックは他にもたくさんあります。

于 2009-08-12T20:04:12.273 に答える
1

前述のように、CSSでdivを使用して、必要な特定の効果を実現します。テーブルはありません。これは、CSSポジショニングの非常に包括的な概要を示したページです。
使用する可能性のあるものの例として、これを試してください。

<html>
<head>
<style type="text/css">
.lyrics {
   width: 200px;
   height: 100px;
   border: 1px solid black;
}
.original {
  float: left;
}
.translation {
  float: right;
}
</style>
</head>
<body>
<div class="lyrics original">(lyrics here)</div>
<div class="lyrics translation">(translation here)</div>
</body>
</html>
于 2009-08-12T20:14:44.577 に答える
1

うーん。意味論的に言えば、私はこれらがリストまたは段落であるという議論を見ることができました。

私は私がこのようなもので行くと思います(コード膨張の謝罪):

<style>
.song
{
  background: #444;
  overflow: auto;
  zoom: 1.0;
  padding-bottom: 1em;
  border: 1px solid #000;
}

.song .lyrics
{
  float: left;
  color: #ddd;
  margin: 1em;
  width: 20em;
}

.song #russian.lyrics { background: #009; }

.song #english.lyrics { background: #090; }   

.song .lyrics p { margin: .5em .2em; }
</style>

<div class="song">
    <div id="russian" class="lyrics">
        <p>Может, поздно, может, слишком рано,</p> 
        <p>И о чем не думал много лет,</p>
        <p>Походить я стал на Дон-Жуана,</p>
        <p>Как заправский ветреный поэт.</p>
    </div>
    <div id="english" class="lyrics">
        <p>Maybe, it's too late or, maybe, early,</p>
        <p>It has not occurred to me for years,</p>
        <p>I resemble now Don Juan, really,</p>
        <p>Like a proper flippant man of verse.</p>
     </div>
</div>
于 2009-08-12T20:18:33.663 に答える
0

私は実際、ここではテーブルが最も理にかなっていると思います。

于 2009-08-13T11:38:21.533 に答える