HTML中的段落元素重叠 [英] Paragraph elements overlapping in HTML

问题描述

对于一个课堂项目，我目前正在从头开始构建一个个人网站作为一个项目，以尝试学习HTML和CSS。在添加文本之前，我的网站进展顺利。

For a class project, I'm currently constructing a personal website as a project from scratch in an attempt to learn HTML and CSS. My site is coming along just fine, until I get to adding text.

下面是我的首页的屏幕截图。正如您在第一张图片中所看到的，我的h3文本被卷曲在页面底部，并且h3元素彼此重叠/堆叠。我不知道为什么会这样。我想将文本放置在h1标签下面，并很好地隔开以创建登录页面，请参见模型。

Below is a screenshot of my homepage. As you can see in my first image my h3 text is scrunched up on the bottom of the page, and the h3 elements are overlapping/stacked on top of one another. I have no idea why this is happening. I wanted to make the text underneath the h1 tags and nicely spaced out to make a landing page, see the mockup.

HTML和CSS代码可以在下面找到：

The HTML and CSS code can be found below:

我在其他页面上也遇到了类似的问题。例如，在我的关于页面上，我设想它具有红色渐变背景，白色文本始终隔开。取而代之的是，我在页面的中央得到了以下粗略的文本：

I am having a similar issue is evident in my other pages as well. For example, on my About page, I envisioned it having a red gradient background with white text on it spaced throughout. Instead, I get this scrunched up text in the center of the page:

此部分的CSS可以在上面的CSS图像上找到，但这就是我的一些HTML看起来像

The CSS for this section can be found on the CSS image above, but this is what some of my HTML looks like

我确定我的文本重叠问题是一种快速解决方案，但是我不知道它在做什么或为什么。如果有人可以帮助我，那将很棒。谢谢

I'm sure my text overlapping issue is a quick fix, but I have no idea what it's doing or why. If anyone could help me out that would be great. Thanks

推荐答案

重叠是由bodyText类中的position，absolute，margin-top或top元素引起的。只需从bodyText类中删除top和margin-top并将它们放在另一个类中即可。对不同的段落使用不同的填充。在这里，您对所有段落都使用相同的填充，因此它们最终出现在同一位置。

the overlapping is caused by either position:absolute, margin-top or top element in your bodyText class. Just remove the top and margin-top from bodyText class and put them in another class. use different padding for different paragraphs. here you are using same padding for all of your paragraphs so they ended up coming in the same place.

     .bodyText{ margin:auto}// put other elements except top and margin-top and position:absolute
      .paddingtop50{ top:50%}
      .paddingtop70{top:70%} // don't use this if not required

      <p class="bodyText paddingTop50">Loren ipsum dolor sit amet<\p>
      <p class="bodyText">Loren ipsum dolor sit amet<\p>

这篇关于HTML中的段落元素重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！