我正在尝试将 white 框 topBoxFlag 向上移动到其父级 topBox 的顶部。但是，由于相对布局，它被向下推到红色框下方。我将如何向上插入它？我尝试了绝对布局，但认为这行不通，因为它会出现在我的所有其他盒子上，而且我觉得它效率极低。是否有类似 float 的东西可以将它推到其父级的顶部？
body
{
background-color: #C6E0F5;
}
#wrapper
{
position: relative;
margin: auto;
width: 1000px;
height: 2900px;
max-width: 1000px;
background-color: #C6E0F5;
}
#header
{
position: relative;
width: 100%;
height: 170px;
background-color: #00247D;
}
#navbar
{
position: relative;
width: auto;
bottom: 20px;
height: 35px;
text-align: center;
background-color: #CF142B;
}
#navbar ul li
{
list-style-type: none;
padding: 20px;
text-align: center;
font-family: "Trebuchet MS";
font-size: 25px;
display: inline;
}
#navbar ul li a
{
text-decoration: none;
font-weight: bold;
color: #fff;
}
.topbox
{
height: 400px;
width: 800;
margin: auto;
background-color: #00247D;
}
.topbox h1
{
font-size: 35px;
font-family: "Trebuchet MS";
text-align: center;
color: #fff;
width: 500px;
background-color: #CF142B;
}
.topbox #topboxFlag
{
float: right;
width: 300px;
height: 400px;
background-color: #fff;
}
.partybox
{
height: 400px;
width: 800;
margin: auto;
background-color: #00247D;
margin-top: 15px;
}
.partybox h1
{
font-size: 35px;
font-family: "Trebuchet MS";
text-align: center;
color: #fff;
width: 500px;
background-color: #CF142B;
}
<html>
<head>
<title>Learn which parties are doing what</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id = "wrapper">
<div id = "header">
<div id = "logo"></div>
</div>
<div id = "navbar">
<ul>
<li><a href="index.html">Major Parties</a></li>
<li><a href="minor.html">Minor Parties</a></li>
<li><a href="whyvote.html">Why Vote</a></li>
<li><a href="about.html">About Us</a></li>
</ul>
</div>
<div class = "topbox">
<h1>The Conservative Party</h1>
<div id = "topboxFlag"></div>
</div>
<div class = "partybox">
<h1>The Labour Party</h1>
<div id = "partyboxFlag"></div>
</div>
<div class = "partybox">
<h1>The Liberal Democrats</h1>
</div>
<div class = "partybox">
<h1>The UK Independence Party</h1>
</div>
<div class = "partybox">
<h1>The Green Party</h1>
</div>
<div class = "partybox">
<h1>The Scottish National Party</h1>
</div>
</div>
</body>
</html>最佳答案
只需向您的样式表再添加一个 css，您就可以开始了。
.topbox h1{
margin:0;
float: left;
}
因为您的 topboxFlag 类有一个 float ，您还应该将 float 添加到您的标题中。
body {
background-color: #C6E0F5;
}
#wrapper {
position: relative;
margin: auto;
width: 1000px;
height: 2900px;
max-width: 1000px;
background-color: #C6E0F5;
}
#header {
position: relative;
width: 100%;
height: 170px;
background-color: #00247D;
}
#navbar {
position: relative;
width: auto;
bottom: 20px;
height: 35px;
text-align: center;
background-color: #CF142B;
}
#navbar ul li {
list-style-type: none;
padding: 20px;
text-align: center;
font-family: "Trebuchet MS";
font-size: 25px;
display: inline;
}
#navbar ul li a {
text-decoration: none;
font-weight: bold;
color: #fff;
}
.topbox {
height: 400px;
width: 800;
margin: auto;
background-color: #00247D;
}
.topbox h1 {
font-size: 35px;
font-family: "Trebuchet MS";
text-align: center;
color: #fff;
width: 500px;
background-color: #CF142B;
}
.topbox #topboxFlag {
float: right;
width: 300px;
height: 400px;
background-color: #fff;
}
.partybox {
height: 400px;
width: 800;
margin: auto;
background-color: #00247D;
margin-top: 15px;
}
.partybox h1 {
font-size: 35px;
font-family: "Trebuchet MS";
text-align: center;
color: #fff;
width: 500px;
background-color: #CF142B;
}
.topbox h1 {
margin: 0;
float: left;
}<html>
<head>
<title>Learn which parties are doing what</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo"></div>
</div>
<div id="navbar">
<ul>
<li><a href="index.html">Major Parties</a>
</li>
<li><a href="minor.html">Minor Parties</a>
</li>
<li><a href="whyvote.html">Why Vote</a>
</li>
<li><a href="about.html">About Us</a>
</li>
</ul>
</div>
<div class="topbox">
<h1>The Conservative Party</h1>
<div id="topboxFlag"></div>
</div>
<div class="partybox">
<h1>The Labour Party</h1>
<div id="partyboxFlag"></div>
</div>
<div class="partybox">
<h1>The Liberal Democrats</h1>
</div>
<div class="partybox">
<h1>The UK Independence Party</h1>
</div>
<div class="partybox">
<h1>The Green Party</h1>
</div>
<div class="partybox">
<h1>The Scottish National Party</h1>
</div>
</div>
</body>
</html>关于html - 为什么我的 div 被压低了？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29500290/