Question

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

以下是代码：

<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>

Answer 1

正如您的代码所代表的那样，浏览器首先使用相互下方的框渲染页面，然后将框移动到另一个框的右侧。这就是相对定位意味着什么。

您希望做的是，使用float:left（在.leftBar上）和float:right（在`.rightBar上），而不是使用相对定位。浏览器将首先渲染元素。

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

你如何摆脱页面底部的开放空间？

1 个答案: