は、私がこのように構成ヘッダーを持つHTML/CSS

Question

に単一の単語を揃え：

<header class="top"> 
    <a href=""> 
    <span class="right">Stichting Delftsche Opera Compagnie presenteert</span> 
    <h1 class="right">Carmen</h1> 
    <h2 class="right">Een opera door Krashna Musika en de TU Delft</h2> 
    </a> 
</header> 

誰かが続いて

Adob​​e Illustratorの中でこれを作ったように、これは、次のようになります。私はいくつかのCSSを適用し、これに慣れました（オランダ語のスペルミスがありますが、これが修正され、スケールも完全に同じではありません）。

ルール：

.top { 
    display: block; 
    width: 800px; 
    float: right; 
} 

.top a { 
    background-image: url('../img/logo.jpg'); 
    background-size: 150px 150px; 
    background-repeat: no-repeat; 

    padding-left: 150px; 
    height: 175px; 

    display: block; 
    overflow: hidden; 
} 

.top .right { 
    text-align: justify; 
    width: 650px; 
} 

.top span, .top h2 { 
    color: #E02C33; 
    font-size: 1.8em; 
} 
.top h1 { 
    color: #B02025; 
    font-size: 4.7em; 
    text-transform: uppercase; 
} 

私はここに二つの問題があります。私は彼らの同じ長さに<span>と<h2>の両方を正当化することができます（期待通りに私の正当化が動作していない）どのよう

1. を
2. 幅と高さがあらかじめ定義されており、文字の間隔がブラウザによってレンダリングされるようにするにはどうすればよいですか？

Answer 1

正当性の問題は、文字間隔が長すぎるため、通常は最後の行が正当化されないことです。

あなたはCSS3を使用することができた場合は、これを可能にする新しい属性がある：ヘッダは常に同じままの場合 http://www.css3.com/css-text-justify/

は、あなたもそれまでは、フォントサイズや文字間隔の属性を調整することができますフィット。

Answer 2

重要なことは、最初にAdobe PhotoshopやIllustratorなどでグラフィックを作成することは異なりますが、実際のWebページに実装すると、出力が少し変わることがあります。だから、私たちはそのようなCSSを書く必要がありますので、私たちは希望のデザインを達成することができます。ありがとう。

は、コードとデモのためのフィドルを参照してください

フィドル：http://jsfiddle.net/ybf25/3/

デモ：http://jsfiddle.net/ybf25/3/embedded/result/

注：私のようにデモを作成することができませんでしたので、私はローズのイメージを持っていないので問題のあなたの与えられたイメージ

出力のスクリーンショットを見る：新しいウィンドウでスクリーンショットを開き、鮮明な画像を表示してください。