0

我的网站有一个滚动条，它向右移动很远，一个向下滚动。这些区域没有显示任何内容，因此滚动条是不必要的！如果有的话，它可以放在一页上。这些在我的页面周围创建了很多空白空间。

我怎样才能阻止这种情况发生？

   <!DOCTYPE html>
<head>
<link href='http://fonts.googleapis.com/css?family=Paytone+One' rel='stylesheet' type='text/css'>
<title>Louis Moore | Creating The Future  </title>
<!--[if IE]>
<link rel="stylesheet" type"text/css" href="ie.css" >
<![endif]-->

</head>
<style>
.box {
background-color: #F1F2F2;
border: 1.5px #D1D3D4 solid;
position: relative;
top: 100px;
height:450px;
width:100%;
}
.image1 {
position: relative;
top:-100px;
left: 390px;
}
body{
font-family: 'Paytone One', sans-serif;
font-size: 30px;
}
h1 {
font-family: 'Paytone One', sans-serif;
font-size: 40px;
position: relative;
top:-250px;
left: 370px;
}
h2 {
font-family: 'Paytone One', sans-serif;
font-size: 30px;
position: relative;
top:-300px;
left: 480px;
color: #FC3B3B;
}
h3 {
font-family: 'Paytone One', sans-serif;
font-size: 20px;
position: relative;
top:-290px;
left: 390px;
}
.image2 {
position: relative;
top:-300px;
left: 590px;
}
.box1 {
width: 100%;
height: 5px;
background-color:  #FC3B3B;
position: relative;
top:100px;
left: 0px;
}
p {
position: relative;
top:150px;
left: 100px;
font-size: 15px;
font-family: arial;
color: #585858;
}
</style>


<body>
<div class="box">
<img src="louis.png" class="image1" alt="." width="400px" height="400px">
<h1> WELCOME TO MY PAGE</h1> 
<h2>COMING SOON... </h2>
<h3>BUT FOR NOW FOLLOW ME ON TWITTER</h3>
<a href="http://twitter.com/louismoore18"><img src="twitter.png" class="image2" border="0" alt="."></a>
</div>
<div class="box1">

</div>
<p>louismoore.net © All rights reserved 2012</p>
</body>
</html>

编辑：这就是它的样子

4

1 回答 1

0

relative这是定位和设置left值的工件。

删除它，多余的空间就消失了。

演示

编辑

您不需要任何相对定位。您尝试完成的设计可以用text-align: center.

HTML 
<div>
  <img src="//placehold.it/200x200">
  <h1>Welcome to my page</h1>
  <h2>Coming Soon...</h2>
  <h3>But for now follow me on Twitter</h3>
</div>​
CSS 
@import url(http://fonts.googleapis.com/css?family=Paytone+One);

div {
    text-align: center;
    background: #ddd;
    border-bottom: 3px solid red;
    margin: 5px;
    padding: 10px;
    font-family: 'Paytone One', sans-serif;
    font-size: 24px;
}

h1 { 
    font-size: 2em;
}

h2 {
    font-size: 1.5em;
    color: red;
}

img {
    width: 200px;
    height: 200px;
    }​

演示

于 2012-12-23T17:02:59.893 回答