我试图将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>
答案 0 :(得分：0)
只需在样式表中再添加一个css，就可以了。
.topbox h1{
margin:0;
float: left;
}
由于你topboxFlag类有一个浮点数，你还应该为你的标题添加浮点数。
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>
答案 1 :(得分：0)
你能先制作旗帜div吗？
<div class="topbox">
<div id="topboxFlag></div>
<h1>The Conservative Party</h1>
</div>