我正在用HTML5构建一个基本站点,并使用FlexBox。如您所见:
“ 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/