html - h2 填充和 Div 定位

Question

有人可以看一下我的新网站的正在进行的测试页面的以下链接 - http://goo.gl/YwGiB

我是 CSS 的新手，遇到过一些没有专家帮助我无法解决的问题。有人可以回答我三个问题，并可能解释一下如何修改它吗？

1) 为什么我的中间栏在默认情况下将自己分成多个部分，而我的右侧栏几乎相同但没有分区？我该怎么做才能使它在右侧列中默认显示？

2) 我希望右侧栏中有一个框与中间栏中标题为“新闻”的第一个框平行运行，然后在其下方平行运行第二个框(标题为“博客”的框但它将具有不规则长度。执行此操作的最佳方法是什么？是使用标准定位命令将它们移动到位的情况还是有更好的方法？

3) 我已经从我的 h1-h3 标签(特别是 h2 标签)中去除了填充和边距，但字母上方似乎仍有空间。当使用将成为最终字体的 MerceariaAntique 字体时，它会更加明显，但不幸的是，我现在无法修改我的 html 文件来显示它。我试图通过调整行高来解决它，但我没有得到任何一致的结果。除了调整行高和边距外，还有什么我可以做的吗？

提前致谢

Answer 1

首先，在您的标记中，您使用 <div> 划分了您的部分元素，这是完全可以接受的，但是您使用了相同的 ID 来标识它们中的每一个。这就是类的目的。 ID 应该是唯一的并且在一个页面上只使用一次，类可以用于将相同的样式应用于多个元素。

所以这样:

<div id="newsitem">

应该是这样的:

<div class="newsitem">

现在回答您的实际问题!

1. 默认情况下，段落和标题设置了填充和边距。您的部分有空格的原因是段落标记上的边距。删除它会删除空格，但也会将文本与下一个标题放在一起。你可以通过给出 <p> 来解决这个问题标记 0 边距并为它们提供填充，或者为部分容器提供填充。

2. 如果您希望右侧列中的框与中间列中的框对齐，则必须更改布局的工作方式，以便您拥有行而不是我认为的列。这样可以更轻松地将它们排成一行。

   根据您的描述，您应该具有以下布局:

   中间栏 |右栏
   中间栏 |右栏
   中间栏

   要保持中心列的背景颜色，您可以将 background-color 属性应用到类 .centre 或更具体的 .column.centre (尽管这种类型的 CSS 选择器可能无法在 IE6 中工作)。

3. H2 的问题归结为行高，每种字体可能有不同的行高，因此您必须尝试使用​​该值，直到找到正确的值。如果您发现顶部位置正确，但下面的文本越来越近或重叠，请为 H2 指定一个底部填充值。