0

私の目標: .firstCharacter に続くものを除いて、すべての段落をインデントします。

ページの特定のセクションの最初の段落にドロップ キャップがあります。最初のタグの後のすべての段落タグをインデントするように設定しました...

.storyContainer p + p {
    text-indent: 1.5em;
    margin-top: 0
}

を使用してドロップキャップを設定しています...

.firstcharacter {
    float: left;
    font-size: 80px;
    line-height: 60px;
    padding-top: 4px;
    padding-right: 8px;
    padding-left: 3px;
    font-family: 'Droid Serif', serif;
}

私のhtmlはそのままです...

<div class="headline">This is a headline!</div>

<p><span class="firstcharacter">T</span>his text NOT indented because it's first</p>
<p>This text will be indented because it's second.</p>
<p>This text will be indented because it's third.</p>

<div class="someBox">This is some extra box</div>

<p>I want this to be indented but it won't be because it is first after the box!</p>
<p>This text will be indented because it's second.</p>

<div class="headline">This is a headline!</div>

<p><span class="firstcharacter">T</span>his text NOT indented because it's first</p>
<p>This text will be indented because it's second.</p>
<p>This text will be indented because it's third.</p>

<div class="someBox">This is some extra box</div>

<p>I want this to be indented but it won't be because it is first after the box!</p>
<p>This text will be indented because it's second.</p>

これを二乗する方法について何か助けはありますか？

ありがとう！

4

2 に答える 2

0

http://jsfiddle.net/WRKxQ/

html:

<div class="headline">This is a headline!</div>
<p class="firstcharacter"><span>T</span>his text NOT indented because it's first</p>
<p>This text will be indented because it's second.</p>
<p>This text will be indented because it's third.</p>
<div class="someBox">This is some extra box</div>
<p>I want this to be indented but it won't be because it is first after the box!</p>
<p>This text will be indented because it's first.</p>

<div class="headline">This is a headline!</div>

<p class="firstcharacter"><span>T</span>his text NOT indented because it's first</p>
<p>This text will be indented because it's second.</p>
<p>This text will be indented because it's third.</p>
<div class="someBox">This is some extra box</div>
<p>I want this to be indented but it won't be because it is first after the box!</p>
<p>This text will be indented because it's first.</p>

CSS:

p {
    text-indent: 1.5em;
    margin-top: 0
}

.firstcharacter {
    text-indent: 0;
}

.firstcharacter span {
    float: left;
    font-size: 80px;
    line-height: 60px;
    padding-top: 4px;
    padding-right: 8px;
    padding-left: 3px;
    font-family:'Droid Serif', serif;
}

これで解決するはず？

私は基本的にCSSとHTMLを少しシフトしました。

楽しんで

ジャシャ

于 2013-02-15T20:04:30.800 に答える
0

p::first-line{}最初の行では、それをインデントするために使用できます。最初の文字には、を使用できますp::first-letter。IE<9 の場合は、コロンを 1 つだけ使用します。

最初の段落以降のすべての段落を選択するには、nth-child(n) 疑似クラスを使用できます。

于 2013-02-15T20:12:45.083 に答える