body {
background-color:olive;
margin:0;
}
nav {
background-color:aqua;
position:sticky;
top:0;
border:1px solid red;
}
#container{
max-height:1800px;
display:flex;
flex-direction:row;
}
a {
background-color:chocolate;
padding:7px;
border-radius:10px;
text-decoration:none;
}
#container > a:hover{
opacity:0.5;
}
#logout {
margin-left:auto;
}
.bonus {
margin-left:10px;
}
/* nav is finally done after 1.5 hours lol and another 30mins */
hr {
border: 1px solid black;
}
.peepee{
text-align:center;
margin-left:auto;
margin-right:auto;
width:70%;
}
.bees {
width:200px;
float:right;
}
.flex-box {
height:800px;
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
}
.flex-box > div {
height:400px;
width:300px;
}
.one{
background-color:red;
}
.two {
background-color:green;
}
h1 {
text-align:center;
color:yellow;
}
li {
font-weight:bold;
line-height:40px;
}
.head {
background-color:blue;
}<body>
<img src=https://images.unsplash.com/photo-1531870972494-627796a756dc?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=72a43beae93d56392f98f6eda2cdd8cb&auto=format&fit=crop&w=500&q=60 width="100%" height="150" "border-radius:40px">
<nav>
<div id="main-content">
<div id="container" >
<a id="main" href="main1.html">Main</a>
<a id="information" class="bonus" href="information.html" style="background-color:#bad455">Statistics</a>
<a id="contacts" class="bonus" href="contacts.html">Contacts</a>
<a id="media" class="bonus" href="media.html">Media</a>
<a id="logout" href="logout.html">Log out</a>
</div>
</div>
</nav>
<p class="peepee"> <img class="bees" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Storni_1000128.JPG/1280px-Storni_1000128.JPG">More than 99 percent of all species, amounting to over five billion species,[7] that ever lived on Earth are estimated to be extinct.[8][9] Estimates on the number of Earth's current species range from 10 million to 14 million,[10] of which about 1.2 million have been documented and over 86 percent have not yet been described.[11] According to another study, the number of described species has been estimated at 1,899,587.[12] 2000–2009 saw approximately 17,000 species described per year.[12] The total number of undescribed organisms is unknown, but marine microbial species alone could number 20,000,000.[12] The number of quantified species will ipso facto always lag behind the number of described species, and species contained in these lists tend to be on the K side of the r/K selection continuum. More recently, in May 2016, scientists reported that 1 trillion species are estimated to be on Earth currently with only one-thousandth of one percent described.[13] The total amount of related DNA base pairs on Earth is estimated at 5.0 x 1037 and weighs 50 billion tonnes.[14] In comparison, the total mass of the biosphere has been estimated to be as much as 4 TtC (trillion [million million] tonnes of carbon).[15] In July 2016, scientists reported identifying a set of 355 genes from the Last Universal Common Ancestor (LUCA) of all organisms living on Earth.[16]</p>
<hr>
<div class="flex-box">
<div class="head"></div>
<div class="one">
<h1>Pros</h1>
<ul>
<li>Forest fires help to kill disease. </li>
<li>It provides nutrients for new generations of growth. </li>
<li>It refreshes the habitat zones. </li>
<li>Low intensity fires don’t usually harm trees. </li>
</ul>
</div>
<div class="two">
<h1>Cons</h1>
<ul>
<li>A forest fire sets up the potential for soil erosion to occur. </li>
<li>Forest fires always bring death in some form. </li>
<li>Uncontrolled fires can cause localized air pollution. </li>
<li>Homes can be destroyed without compensation.</li>
</ul>
</div>
</div>
</main>
</body>
你好，有人可以告诉我如何将这个蓝色框放在红色和绿色框的上方。有什么办法可以这样说吗？我应该使用flexbox做这样的事情，还是应该在没有flexbox的情况下做呢？这是我想要的示例：http://prntscr.com/k8uuxa。 （希望您可以在此处发布图片链接）。
答案 0 :(得分：0)
添加此样式
.flex-box .head {
width: 100%;
height: 50px;
}
.flex-box {
width: 600px;
margin: 0 auto;
}
并从.flexbox移除高度
body {
background-color: olive;
margin: 0;
}
nav {
background-color: aqua;
position: sticky;
top: 0;
border: 1px solid red;
}
#container {
max-height: 1800px;
display: flex;
flex-direction: row;
}
a {
background-color: chocolate;
padding: 7px;
border-radius: 10px;
text-decoration: none;
}
#container>a:hover {
opacity: 0.5;
}
#logout {
margin-left: auto;
}
.bonus {
margin-left: 10px;
}
/* nav is finally done after 1.5 hours lol and another 30mins */
hr {
border: 1px solid black;
}
.peepee {
text-align: center;
margin-left: auto;
margin-right: auto;
width: 70%;
}
.bees {
width: 200px;
float: right;
}
.flex-box {
width: 600px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin: 0 auto;
}
.flex-box>div {
height: 400px;
width: 300px;
}
.flex-box .head {
width: 100%;
height: 50px;
}
.one {
background-color: red;
}
.two {
background-color: green;
}
h1 {
text-align: center;
color: yellow;
}
li {
font-weight: bold;
line-height: 40px;
}
.head {
background-color: blue;
}<body>
<img src=https://images.unsplash.com/photo-1531870972494-627796a756dc?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=72a43beae93d56392f98f6eda2cdd8cb&auto=format&fit=crop&w=500&q=60 width="100%" height="150" "border-radius:40px">
<nav>
<div id="main-content">
<div id="container">
<a id="main" href="main1.html">Main</a>
<a id="information" class="bonus" href="information.html" style="background-color:#bad455">Statistics</a>
<a id="contacts" class="bonus" href="contacts.html">Contacts</a>
<a id="media" class="bonus" href="media.html">Media</a>
<a id="logout" href="logout.html">Log out</a>
</div>
</div>
</nav>
<p class="peepee"> <img class="bees" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Storni_1000128.JPG/1280px-Storni_1000128.JPG">More than 99 percent of all species, amounting to over five billion species,[7] that ever lived on Earth are estimated to
be extinct.[8][9] Estimates on the number of Earth's current species range from 10 million to 14 million,[10] of which about 1.2 million have been documented and over 86 percent have not yet been described.[11] According to another study, the number
of described species has been estimated at 1,899,587.[12] 2000–2009 saw approximately 17,000 species described per year.[12] The total number of undescribed organisms is unknown, but marine microbial species alone could number 20,000,000.[12] The
number of quantified species will ipso facto always lag behind the number of described species, and species contained in these lists tend to be on the K side of the r/K selection continuum. More recently, in May 2016, scientists reported that 1 trillion
species are estimated to be on Earth currently with only one-thousandth of one percent described.[13] The total amount of related DNA base pairs on Earth is estimated at 5.0 x 1037 and weighs 50 billion tonnes.[14] In comparison, the total mass of
the biosphere has been estimated to be as much as 4 TtC (trillion [million million] tonnes of carbon).[15] In July 2016, scientists reported identifying a set of 355 genes from the Last Universal Common Ancestor (LUCA) of all organisms living on Earth.[16]</p>
<hr>
<div class="flex-box">
<div class="head"></div>
<div class="one">
<h1>Pros</h1>
<ul>
<li>Forest fires help to kill disease. </li>
<li>It provides nutrients for new generations of growth. </li>
<li>It refreshes the habitat zones. </li>
<li>Low intensity fires don’t usually harm trees. </li>
</ul>
</div>
<div class="two">
<h1>Cons</h1>
<ul>
<li>A forest fire sets up the potential for soil erosion to occur. </li>
<li>Forest fires always bring death in some form. </li>
<li>Uncontrolled fires can cause localized air pollution. </li>
<li>Homes can be destroyed without compensation.</li>
</ul>
</div>
</div>
</div>
</main>
</body>