html - 为什么我的网站右边有空白?

标签 html css

<分区>

我一直在用 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>

感谢您的帮助和回复!

最佳答案

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

您正在将 position: relative 应用于所有元素。然后你将它们全部向右移动 left: 400pxleft: 535pxleft: 100px 等。left 属性定义将元素从左边缘推多远。

另外,当一个元素被相对定位时,它原来的空间被保留。因此,当元素向右移动时,它们也保留了它们原来的空间(即使它们不再存在),并且文档在水平方向上被拉长。

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

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

这是来自 MDN 的一个很好的引用:https://developer.mozilla.org/en-US/docs/Web/CSS/position

关于html - 为什么我的网站右边有空白?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34734810/

相关文章:

html - Div - margin-top 作为 div 内的百分比

javascript - header需要在页面滚动时上下滑动

javascript - 两个onClick Action 一个按钮

javascript - 任何 Javascript 库都可以按需进行本地镜像创建和渲染?

html - 导航未与父 Div 垂直对齐

css - 我如何处理付款方式,以便我可以对其进行调整/CSS

css - 阴影文本 : CSS or graphic?

python - 将 JSON 从 flask 传递到模板并解码 html 实体

java - 如何从 Jar 中获取嵌入式 Jetty 服务 html 文件,而不是 war

css - 全高元素不超过父元素的高度 - CSS