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，您将只想使用一个冒号。

要选择第一个段落之后的所有段落，可以使用 nth-child(n) 伪类。

于 2013-02-15T20:12:45.083 回答