为什么我的内容不显示?
真的不确定为什么我的HTML内容没有在div中显示。
Really unsure as to why my HTML content is not displaying inside the divs.
一切看起来都正确,它只是没有显示内容。
Everything looks correct, It is just not displaying the content.
这是一个片段:
main {
width: 100%;
height: 100vh;
display: flex;
flex-wrap: wrap;
justify-content: center;
font-size: 0; /* Removes White space */
}
header {
width: 100%;
height: 18vh;
background-color: orange;
font-size: 1.8em;
}
aside {
width: 20%;
height: 82vh;
background-color: orange;
margin: 0 auto;
font-size: 1.2em;
}
section {
width: 80%;
height: 82vh;
background-color: darkgrey;
margin: 0 auto;
box-shadow: 5px 5px 5px inset;
font-size: 1.2em;
}
<main id="content">
<header>
<h1>Just a random Header</h1>
</header>
<aside>
<p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p>
</aside>
<section>
<p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p>
<p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p>
<p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p>
<p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p>
</section>
</main>
有关如何解决此问题的任何想法?如果显示我的内容,那将非常棒
Any ideas on how to solve this? It would be really great if my content displayed
因为你设置了 font-size:0;父包装上的
并没有为子div重置它。
Because you have set font-size: 0;
on the parent wrapper and haven't reset it for the child divs.
所以,当使用时em
(这是基于父级字体大小的比例值)1.8em仍为0,因为1.8 x 0仍为0.
So, when using em
(which is a proportinal value based on the parent's font size) 1.8em would still be 0 because 1.8 x 0 is still 0.
无论如何都不需要使用flexbox。只需删除它。
It's not necessary when using flexbox anyway. Just remove it.
* {
margin: 0;
padding: 0;
}
main {
width: 100%;
min-height: 100vh;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
header {
width: 100%;
height: 18vh;
background-color: orange;
}
aside {
width: 20%;
height: 82vh;
background-color: orange;
}
section {
width: 80%;
height: 82vh;
background-color: darkgrey;
box-shadow: 5px 5px 5px inset;
}
<main id="content">
<header>
<h1>Just a random Header</h1>
</header>
<aside>
<p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p>
</aside>
<section>
<p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p>
<p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p>
<p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p>
<p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p>
</section>
</main>