0

我在段落标签中有文本，它适合紧贴在 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>

我该怎么办？

4

7 回答 7

4

给最后一段一个 id - 也许是#disclaimer - 然后将其样式设置为 padding-top。

<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 赋予底部边距/填充样式。

于 2009-06-30T13:25:05.193 回答
3

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

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

不过，一些旧浏览器将无法识别此选择器

于 2009-06-30T13:29:21.973 回答
2

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

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

div.finaltext {
   clear: both;
   margin-top: 10px;
}
于 2009-06-30T13:26:29.340 回答
2

据我所知，这是您的选择：

  1. 使用:last-childCSS3 伪类来定位最后一个 div。IE 根本不支持此功能，因此取决于该浏览器对您的重要性是否是一个选项，但至少其他浏览器会获得所需的效果。

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

  2. 在最后一个 div 中添加一个与上面相同样式的类。这并不理想，可能会也可能不会，具体取决于 div 的生成方式。

  3. 将一个类添加到带有padding-top值的 p 标签。

  4. 使用.article + p选择器来定位 .article 的直接同级的 ap 标签。IE7（我认为）支持这一点，但 IE6 不支持。

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

（感谢Residuum的#4）

于 2009-06-30T13:33:09.267 回答
1

还有第一个孩子和最后一个孩子的css方法

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

于 2009-06-30T13:32:15.257 回答
-2

是这样的结构吗？：

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

你使用 padding: 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 向上移动，所以你最终会得到 P 标签的 15px 底部边距。

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

于 2009-06-30T21:03:24.900 回答
-4

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

于 2009-06-30T13:26:46.190 回答