2009-06-30 47 views
0

的开始之间的间隔我有一个段落标记中的文本,适合在一个div上,您将在此图片中看到的底部舒适:http://i44.tinypic.com/e05s0z.png需要有DIV的结束和段落

我可以把一些填充在div底部来解决这个问题,但可能会有多个div,具体取决于该页面上有多少项目。

我需要做的是在最后一个div(class =“article”)的末尾和段落标记中的文本之间放置一些间距。

下面是文章类

.article { 
    padding:10px; 
    overflow:auto; 
} 

文本瓦特/我段落标记

<p>Herkimer County Community College does not 
discriminate on the basis of race, color, sex, 
national origin, age, handicap, or marital status 
in admission, employment, or in any aspect regarding 
the conduct of College business.</p> 

我应该怎么做的CSS?

回答

4

给最后一段id - #disclaimer,也许 - 然后是有填充顶部的样式。

<p id="disclaimer">Herkimer County Community College does not 
discriminate on the basis of race, color, sex, 
national origin, age, handicap, or marital status 
in admission, employment, or in any aspect regarding 
the conduct of College business.</p> 

和...

#disclaimer { 
padding-top: 10px; 
} 

[编辑] 这一种替代,根据您的意见,将在围绕一个div文章(S),并给予该专区。分类底部边距/填充样式。

+0

该死的,打我吧! – 2009-06-30 13:28:24

+0

段落标记在div之外,这是唯一的方法吗?否则,我将不得不对每个具有此div的页面以及下面的段落执行此操作。必须有一个方法,以适当的间距之后瓦特/段落标记不必破解? – Brad 2009-06-30 13:32:13

+0

你给最后一段ID - 在页面中只使用一次。你不应该有任何麻烦影响其他段落 - 或者我误解了你? – Raithlin 2009-06-30 13:37:23

2

你可以将你的段落包装在顶部有填充的容器中,所以它不在于它的上面。

例如,以下CSS

div.finaltext { 
    clear: both; 
    margin-top: 10px; 
} 
+0

为什么将它包装在另一个有类的元素中,当你可以在第一个地方添加类到p标签? – roryf 2009-06-30 16:31:12

+0

同样,您可以将相同的样式规则添加到段落中。我最近一直在研究大量的CMS项目,因此所有的布局都使用div标签完成,因为该段落将由客户端在用户界面中创建 - 谁可以删除它并在该地点放置一个列表一个按钮 - 所以将所有布局应用于容器而不是单个元素已经成为一种习惯。 – Fenton 2009-07-01 07:03:42

-4

包装在一个div您能简单地将最后一个div后添加一对<br/>标签?

3

如果您的网站上有其他段落,不希望给它一个id或class,那么你也可以使用

.article + p {padding-top: 10px;} 

一些旧的浏览器将无法做出来的这个选择,虽然

2

这里有你的选择,据我看到它:

  1. 使用:last-child CSS3伪 类为目标的最后一个div。这个 根本不支持IE,所以 取决于浏览器 对你来说有多重要,不管这是否是一个选项, ,但至少其他浏览器将 得到所需的效果。

    .article:last-child { padding-bottom: 20px; }

  2. 添加一个类的最后一个div具有相同风格的上方。这并不理想,取决于div的生成方式,可能或不可能。

  3. 将一个类添加到p标记中,其值为padding-top

  4. 使用.article + p选择器将目标作为.article的直接兄弟的p标签。这在IE7(我认为)中支持,但不支持IE6。

我总是会优先考虑1号或4,因为它减少了HTML的混乱,但正如我提到的IE浏览器可以根据您的需要的问题。

(感谢Residuum为#4)

-2

这是建设这样?:

<div class="article">jdhfksdjhfksdhk</div> 
<div class="article">jdhfksdjhfksdhk</div> 
<div class="article">jdhfksdjhfksdhk</div> 
<p>kfdhsjkfdks</p> 

您使用填充:10px的所以div有10px的内部空间。

如果它是一个CMS,我相信段落的文本可以包装在另一个标签(DIV)或可能是(P)的类。如果情况并非如此,请问是否有围绕所有文章div和p标签的包装?

如果是这种情况,那么你可以使用CSS到达P标签,如果没有,你不可能在每个浏览器中实现这一点。

或...我意识到你可以在这里做一个技巧。但你必须确定你在文章div上有一个可选的div。

应该是这样的:

.article { margin-top: -5px; margin-bottom: 15px; } 

所以,每div.article将移动5像素,留下10px的实际利润率悫物品申报单。但最后一个不会有-5px向上移动,所以你最终会得到P标签的15px底部边距。

你可以使用数字来使它成为最舒服的数字。如果您需要更多控制,请使用您设置为10px的填充值,并相应地设置它们以补偿边距偏移量。

相关问题