我正在用HTML5构建一个基本站点,并使用FlexBox。如您所见:

html - 使用Flexbox。网站导航栏损坏-LMLPHP

“ WWF做什么”文本位于navbar ul和<aside>元素之间。我希望它位于导航栏的正下方。我该如何解决?

相关代码段:



.flex {
  display: flex;
  justify-content: space-between;
}

<div id="wrapper">
  <header style="height: 150px">
    <img src="placeholdr">
  </header>
  <nav>
    <ul>
      <li><a>Home</a></li>
      <li><a>About</a></li>
      <li><a>School</a></li>
      <li><a>Workplace</a></li>
      <li><a>Girlfriend</a></li>
    </ul>
  </nav>
  <div class="flex">
    <section id="content">
      <article>
        <header>
          <h1>What Does WWF Do?</h1>
          <p>WWF's mission:</p>
        </header>
        <p>the text</p>
        <p>text</p>
      </article>
    </section>
    <aside>
      <img src="placeholdrr">
    </aside>
  </div>
  <footer>
    <div class="footer">
    </div>
  </footer>
</div>

最佳答案

如果您的'id =“ wrapper”'div中的所有部分(直接子项)的宽度均为100%,则它们自然会以与DOM相同的顺序相互放置,例如

标头
导航
div
页脚

另外,您也可以使用“ flex-direction:column;”将您的'id =“ wrapper”'设置为弹性显示。

关于html - 使用Flexbox。网站导航栏损坏,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42461539/

10-12 13:01
查看更多