Question

我在段落标记中有文字，它恰好适合div的底部，您将在此图片中看到：http://i44.tinypic.com/e05s0z.png

我可以在div的底部添加一些填充来修复此问题，但可能有多个div，具体取决于该页面上的项目数。

我需要做的是在最后一个div（class =“article”）的末尾与段落标记内的文本之间加一些间距。

这是文章类的css

.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>

我该怎么办？

Answer 1

给最后一个段落一个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中包含文章，并给div.class一个底边距/填充样式。

Answer 2

如果您的网站上有其他段落，并且不想给它一个ID或类，那么您也可以使用

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

虽然

，但有些旧浏览器无法显示此选择器

Answer 3

您可以将段落包装在顶部有填充的容器中，因此上面的内容无关紧要。

例如，使用以下css将其包装在div中

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

Answer 4

就我看来，以下是您的选择：

使用:last-child CSS3伪用于定位最后一个div的类。这个 IE根本不支持，所以取决于浏览器的重要性对你来说这是否是一个选择，但至少其他浏览器会得到预期的效果。

.article:last-child { padding-bottom: 20px; }
使用与上面相同的样式将类添加到最后一个div。这是不理想的，取决于div的生成方式，可能会也可能不会。
使用padding-top值向p标记添加一个类。
使用.article + p选择器定位作为.article直接兄弟的p标记。这在IE7（我认为）中得到支持，但不支持IE6。

我总是优先选择＃1或＃4，因为它可以减少HTML中的混乱，但正如我所提到的，IE可能会成为一个问题，具体取决于您的需求。

（感谢＃{3}}＃4）

Answer 5

还有first-child and last-child css方法

注意：检查您希望支持的浏览器兼容性

Answer 6

这是这样的结构吗？：

<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将向上移动5px，在文章div之间留下10px的实际边距。但最后一个不会让-5px向上移动，所以你最终会得到15px的P标签底部边距。

您可以使用数字来使其成为最舒适的数字。如果您需要更多控制，请使用您在每种方式设置为10px的填充值并相应地设置它们以补偿边距偏移。

Answer 7

你能在最后一个div之后添加几个<br/>标签吗？

需要在div的结尾和段落的开头之间留有间距

7 个答案: