2

これは面白いはずです。これが私がCSSでやろうとしていることです：

  1. 「例の配置」という単語は、単一の<h1>要素に含める必要があります。
  2. 「Alignment」という単語は2行目にあるはずです（<br />タグで簡単に）。
  3. 「An」という単語は、他の単語よりも小さくする必要があります（<span>タグを付けると簡単です）。

ここに画像の説明を入力してください

だから私たちは持っています：

<h1><span>An</span> Example <br />Alignment</h1>

しかし、ここに問題があります。

  • また、2番目と3番目の単語の最初の文字を垂直に並べたいのですが、そこで問題が発生します。

これがどのように見えるべきかです：http ：//jsfiddle.net/Baumr/H2Pzr/

<h1>しかし、2つの要素があるため、これは醜い解決策です。

HTMLを同じに保つことによってCSSでこれを行う方法のアイデアはありますか？聞いてとても興味があります。前もって感謝します。

PS「An」を別のものに入れることもでき<span>ますが、すべてを1つにまとめたいと思い<h1>ます。）

4

4 に答える 4

2

display:inline-block右マージンが常に完全に同じになるように、2つのスパンを使用してパディングを行います（フォント幅は使用中のフォント面によって異なります）。

<h1>
    <span class="padding">An</span> Example <br>
    <span class="padding"></span> Alignment
</h1>

CSS：

h1 {
    font-size: 30px;
}

.padding {
    font-size: 20px;
    width: 30px;
    display:inline-block;
}

IEが常に正しい方法を使用するとは限らないことに注意してくださいinline-block（この場合は正しい方法を使用する必要があります）。

アップデート

さらに優れたソリューション：http：//jsfiddle.net/H2Pzr/9/

要素の表示を使用しtable-cellて、要素を2つの列に自動的に配置します。

HTML：

<h1>
<span class="first">An</span>
<div class="second">
    Example <br>
    Alignment
</div>
</h1>

CSS：

h1 {
    font-size: 30px;
}

.first {
    display:table-cell;
    font-size: 20px;
    color: #444;
}
.second {
    display:table-cell;
}
于 2012-10-27T20:20:13.973 に答える
1

同じH1タグで2つのスパンクラスを使用します。

<h1>
    <span class="small-text">An</span> Example 
    <span class="line-two">Alignment</span>
</h1>

次に、それに応じてCSSを更新します。

h1 {
    font-size: 30px;
}

span.small-text {
    font-size: 20px;
}

.line-two{
    display:block;
    margin-left: 31px;
}

ここでは、2番目のスパンを更新されたフィドル<br />として表示できるため、必要ありません：http: //jsfiddle.net/H2Pzr/6/display:block;

于 2012-10-27T20:02:30.453 に答える
1

異なるクラスで 2 つのスパンを使用します。jsfiddleを参照してください。

<h1><span class="first">An</span> Example <br>
    <span class="second">Alignment</span>
    </h1>
于 2012-10-27T19:58:27.400 に答える
1

これを試してください: (最小限の要素!)

<h1>Example <br>Alignment</h1>​

h1 {
    font-size: 30px;
    margin-left: 31px;
}

h1:before
{
    content: 'An  ';
    font-size: 20px;
    margin-left: -31px;
}
于 2012-10-27T20:09:04.517 に答える