为什么我的内容不显示？ [英] Why does my content not display?

问题描述

真的不确定为什么我的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>

这篇关于为什么我的内容不显示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！