Question

真的不确定为什么我的HTML内容没有显示在div中。

一切看起来都很正确，只是没有显示内容。

这是一个片段：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

关于如何解决这个问题的任何想法？如果我的内容显示

，那真的很棒

Answer 1

因为您在父包装上设置了font-size: 0;并且没有为子div重置它。

因此，当使用em（这是基于父级字体大小的比例值）时，1.8em仍然为0，因为1.8 x 0仍为0.

无论如何都不需要使用flexbox。只需删除它。

* {
  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>

Answer 2

我不知道为什么，但main的字体大小比分节更重。

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>

Answer 3

这是因为您使用em作为单位。 em表示# times of current font size，您当前的字体大小设置为.main {font-size: 0}

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: 18px;
}
aside {
  width: 20%;
  height: 82vh;
  background-color: orange;
  margin: 0 auto;
  font-size: 16px;
}
section {
  width: 80%;
  height: 82vh;
  background-color: darkgrey;
  margin: 0 auto;
  box-shadow: 5px 5px 5px inset;
  font-size: 16px;
}

<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>

Answer 4

问题是您在.main中将字体大小设置为0。在其余的代码中，您使用的是ems。

问题是em单位是根据包含元素的字体大小计算的。从那时起，1 em = 1个包含元素字体大小的单位。因此，既然您已将包含元素的字体大小设置为0，那么无论您在其他元素中将其设置为什么，它都将始终保持为0，因此不会显示您的文本。

尝试将.main字体大小更改为12px。

为什么我的内容无法显示？

4 个答案: