0

我一直在做一个小项目，但遇到了一个问题。当我在浏览器中查看我的网站时，所有内容的底部都有一个非常大的开放空间。谁能帮我找出问题所在？我一直试图找到它几个小时。

这是代码：

<html>
<head>
<title>Media Mash - Home</title>
<style type="text/css">
* {
font-family:neuropol;
color:rgb(255,255,255);
}
body {
background-color:rgb(52,126,153);
}
.text1 {
font-size:20;
color:rgb(0,0,0);
}
.text2 {
font-size:35;
text-decoration:none;
margin-left:4%;
margin-right:4%;
}
.parent {
min-width:1255px;
}
.topBar {
background-color:rgb(161,35,35);
display:inline-block;
width:1247px;
text-align:center;
height:40px;
}
.leftBar {
top:8px;
background-color:rgb(161,35,35);
position:relative;
display:inline-block;
width:250px;
text-align:center;
height:581px
}
.main {
background-color:rgb(161,35,35);
position:relative;
display:inline-block;
left:258px;
bottom:573px;
width:989px;
height:581px;
}
.imageLeft {
background-color:rgb(104,22,22);
position:relative;
display:inline-block;
}
.imageRight {
background-color:rgb(104,22,22);
position:relative;
display:inline-block;
}
.textLeft {
background-color:rgb(104,22,22);
position:relative;
display:inline-block;
}
.textRight {
background-color:rgb(104,22,22);
position:relative;
display:inline-block;
}
.copyright {
background-color:rgb(161,35,35);
position:relative;
display:inline-block;
height:32px;
bottom:565px;
width:1247px;
text-align:center;
}
</style>
</head>
<body>
<div class="parent">
    <div class="topBar">
        <a class="text2" href="placeholder.html">Media Mash</a>
        <a class="text2" href="placeholder.html">Film</a>
        <a class="text2" href="placeholder.html">Music</a>
        <a class="text2" href="placeholder.html">Games</a>
        <a class="text2" href="placeholder.html">Books</a>
    </div>
    <br/>
    <div class="leftBar">
        <a class="text1">
            Media Mash is a website dedicated to helping you realise what favourite films, songs, games and books are.
            <br/>
            <br/>
            We do so in a fun image versus image format, which allows you to pick out your favourites.
            <br/>
            <br/>
            Have a go and create your top 10 lists today!
        </a>
    </div>
    <br/>
    <div class="main">
        <div class="imageLeft">
            <img src="images\The Avengers MM.jpg"/>
        </div>
        <div class="imageRight">
            <img src="images\Star Wars V The Empire Strikes Back MM.jpg"/>
        </div>
        <br/>
        <div class="textLeft">
            <a class="text1">The Avengers</a>
        </div>
        <div class="textRight">
            <a class="text1">Star Wars V: The Empire Strikes Back</a>
        </div>
    </div>
    <br/>
    <div class="copyright">
        <a class="text1">Copyrighted intellectual property of Thomas Crowther ©</a>
    </div>
</div>
</body>
</html>
4

1 回答 1

2

正如您的代码所代表的那样，浏览器首先渲染页面，其中包含彼此下方的框，然后将框移动到另一个框的右侧。这就是相对定位的含义。

你想要做的是，而不是使用相对定位，使用float:left(on .leftBar) 和float:right(on `.rightBar)。浏览器将首先呈现元素。

我建议您阅读 CSS 中的“盒子模型”，并查看适用于 Firefox 的 Firebug。

于 2012-05-20T21:26:09.687 回答