Question

我一直在用Animate.css创建自己的个人网站，发现右边有一个空白点，无法找出原因

这是我的代码：

<!DOCTYPE html>
<html>

<head>
  <style>

    .hudson {
          color: white;
          position: relative;
          font-size: 60px;
          left: 400px;
          top: 110px;
          font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
            }

      .threeD {
        text-shadow: 
           0 1px 0 #ccc,
           0 2px 0 #c9c9c9,
           0 3px 0 #bbb,
           0 4px 0 #b9b9b9,
           0 5px 0 #aaa,
           0 6px 1px rgba(0,0,0,.1),
           0 0 5px rgba(0,0,0,.1),
           0 1px 3px rgba(0,0,0,.3),
           0 3px 5px rgba(0,0,0,.2),
           0 5px 10px rgba(0,0,0,.25),
           0 10px 10px rgba(0,0,0,.2),
           0 20px 20px rgba(0,0,0,.15);
              }

      .p1 {
         position: relative;
         top: 75px;
         left: 100px;
         -webkit-animation-delay: 1s;

      }

      .p2 {
         position: relative;
         top: 85px;
         left: 100px;
         -webkit-animation-delay: 1s;
      }

      .p3{
          position: relative;
          top: 95px;
          left: 95px;
          -webkit-animation-delay: 1s;
      }

      .coding {
          position: relative;
          top: -325px;
          left: 535px;

      }

      .paracolor {
            color: skyblue;
            font-size: 25px;
            font-family: Tahoma, Geneva, sans-serif;
            }

      .img1 {
          position: relative;
          top: 250px;
          left: 20;
            }

    body {
    background-image: url(PICTURES1/mountains4.jpeg);
    background-size: 102%;
    background-repeat: no-repeat;
         }

  </style>
</head>
  <link rel=stylesheet href="CSS3/animate(1).css">
<body>
    <h2 class="hudson threeD animated fadeInDown">Hudson Reamer</h2>
    <p class="paracolor p1 animated fadeInRightBig">I am a young technology and coding enthusiast. I am currently studying HTML,CSS, and C++.</p>
    <p class="paracolor p2 animated fadeInLeftBig">I hope to one day go to MIT or Stanford  to study computor science of computor engineering.</p> 
    <p class="paracolor p3 animated fadeInRightBig">I will build people custom computors for an 100 dollar building fee and the price of the PC parts</p>
  <img class="coding animated fadeInDown" src="PICTURES1/coding.png" style="width:150px;height:150px;">
</body>

感谢您的帮助和回复！

Answer 1

页面右侧的大面积空白是由相对定位引起的。

您正在将position: relative应用于所有元素。然后，您使用left: 400px和left: 535px以及left: 100px等将所有这些转移到右侧。left属性定义从左边缘推送元素的距离

此外，当元素相对定位时，保留其原始空间。因此，虽然元素向右移动，但它们也保留了原始空间（即使它们不再存在），并且文档正在水平延长。

删除所有left属性并查看差异。一切都向左移动，水平滚动条消失。 DEMO

我不确定你的布局目标是什么，但是，仅仅为了对比，这里有一个可供考虑的替代方案：而不是relative尝试absolute定位，这会从文档流中删除元素，所以他们原来的空间被淘汰了。

以下是MDN的一个很好的参考：https://developer.mozilla.org/en-US/docs/Web/CSS/position

Answer 2

所有段落标记的左侧都有“x”像素数

示例

左侧位置的

p1为100px

p2从左侧位置是100px

p3从左侧位置是95px

从你的CSS中取出上述内容，一切都应该没问题

以下片段

  <style>

    .hudson {
          color: white;
          position: relative;
          font-size: 60px;
          left: 400px;
          top: 110px;
          font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
            }

      .threeD {
        text-shadow: 
           0 1px 0 #ccc,
           0 2px 0 #c9c9c9,
           0 3px 0 #bbb,
           0 4px 0 #b9b9b9,
           0 5px 0 #aaa,
           0 6px 1px rgba(0,0,0,.1),
           0 0 5px rgba(0,0,0,.1),
           0 1px 3px rgba(0,0,0,.3),
           0 3px 5px rgba(0,0,0,.2),
           0 5px 10px rgba(0,0,0,.25),
           0 10px 10px rgba(0,0,0,.2),
           0 20px 20px rgba(0,0,0,.15);
              }

      .p1 {
         position: relative;
         top: 75px;
 
         -webkit-animation-delay: 1s;

      }

      .p2 {
         position: relative;
         top: 85px;
 
         -webkit-animation-delay: 1s;
      }

      .p3{
          position: relative;
          top: 95px;
 
          -webkit-animation-delay: 1s;
      }

      .coding {
          position: relative;
          top: -325px;
          left: 535px;

      }

      .paracolor {
            color: skyblue;
            font-size: 25px;
            font-family: Tahoma, Geneva, sans-serif;
            }

      .img1 {
          position: relative;
          top: 250px;
            }

    body {
    background-image: url(PICTURES1/mountains4.jpeg);
    background-size: 102%;
    background-repeat: no-repeat;
         }

  </style>
</head>
  <link rel=stylesheet href="CSS3/animate(1).css">
<body>
    <h2 class="hudson threeD animated fadeInDown">Hudson Reamer</h2>
    <p class="paracolor p1 animated fadeInRightBig">I am a young technology and coding enthusiast. I am currently studying HTML,CSS, and C++.</p>
    <p class="paracolor p2 animated fadeInLeftBig">I hope to one day go to MIT or Stanford  to study computor science of computor engineering.</p> 
    <p class="paracolor p3 animated fadeInRightBig">I will build people custom computors for an 100 dollar building fee and the price of the PC parts</p>
  <img class="coding animated fadeInDown" src="PICTURES1/coding.png" style="width:150px;height:150px;">
</body>

Answer 3

它的你的哈德森，p1，p2，p3绝对左边是一直向右走。你可以用text-align：center替换这些样式中的“left：”;

为什么我的网站右边有空格？

3 个答案: