为什么我的网站右侧有空格？ [英] Why is there blank space to the right of my website?
问题描述
我一直在使用Animate.css制作自己的个人网站，并注意到右侧有一个空白处，无法找出原因
I have been making my own personal site with Animate.css and noticed there was a blank spot to the right and couldn't figure out why
这是我的代码：
<!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>
感谢您的帮助
推荐答案
页面右侧的大空白区域是由相对定位引起的
The large area of whitespace on the right of your page is caused by relative positioning.
您正在对所有元素应用 position：relative 。然后你用 left：400px 和 left：535px 和 left：100px 等。 left 属性定义从左边缘推动元素的距离。
You are applying position: relative to all your elements. Then you're shifting all of them to the right with left: 400px and left: 535px and left: 100px, etc. The left property defines how far to push the element from the left edge.
此外，当元素相对定位时，其原始空间被保留。因此，当元素向右移动时，它们也保持原来的空间（即使它们不再存在），并且文档被水平延长。
Also, when an element is relatively positioned, its original space is reserved. So while the elements are shifting rightward, they are also keeping their original spaces (even though they're not there anymore), and the document is being lengthened horizontally.
删除所有左属性和看到的区别。一切向左移动，水平滚动条消失。 DEMO
Remove all the left properties and see the difference. Everything shifts left and the horizontal scrollbar disappears. DEMO
I不确定你的布局目标是什么，但只是为了对比，这里是一个替代考虑：代替相对尝试绝对
I'm not sure what your layout objective is but, simply for contrast, here's an alternative to consider: Instead of relative try absolute positioning, which removes the elements from the document flow, so their original space is eliminated.
这是从MDN的一个很好的参考： https://developer.mozilla.org/en-US/docs/Web/CSS/position
Here's a good reference from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/position
这篇关于为什么我的网站右侧有空格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
