html - 使用 html 和 css 在导航栏下方定位侧边栏和文章

Question

使用此 html 代码:

    <header>
        <ul>
            <li> <a href="#">...</a> </li>
            <li> <a href="#">...</a> </li>
            <li> <a href="#">...</a> </li>
            <li> <a href="#">...</a> </li>
            <li> <a href="#">...</a> </li>
        </ul>
    </header>

    <main>
        <nav>
            <ul>
                <li> <a href="#">...</a> </li>
                <li> <a href="#">...</a> </li>
                <li> <a href="#">...</a> </li>
                <li> <a href="#">...</a> </li>
                <li> <a href="#">...</a> </li>
            </ul>
        </nav>

        <article>
            <section>
                <ul>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                </ul>
            </section>

            <section>
                <ul>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                </ul>
            </section>

            <section>
                <ul>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                </ul>
            </section>

            <section>
                <ul>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                </ul>
            </section>

            <section>
                <ul>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                </ul>
            </section>
        </article>
    </main>

    <footer>
        <ul>
            <li> <a href="#">...</a> </li>
            <li> <a href="#">...</a> </li>
            <li> <a href="#">...</a> </li>
            <li> <a href="#">...</a> </li>
            <li> <a href="#">...</a> </li>
        </ul>
    </footer>

我正在尝试编写一个 css 来完成这些事情:

• 顶部有一个固定的导航栏(已经可以)
• 带有侧边栏和“文章”区域的主区域(需要固定位置并对齐其部分)
• 文章区域需要放在侧边栏的右侧，但现在显示在侧边栏的底部。
• 页脚下方显示了一些奇怪的横幅(仅当鼠标光标未悬停时)，如下所示:

https://jsfiddle.net/klebermo/5axmocwp/1/

任何人都可以提供一些有关如何解决该问题的提示？

Answer 1

也许这就是你想要的？我只在 css 中更改它:

main {
  margin-top: 32px;

  /* below lines was added */
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

footer {
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #333;
  color: white;
  text-align: center;

  /* below line was added */
  height: 50px;
}

这里是 example .我在这个解决方案中使用了 flexbox - 关于这个的很棒的教程是 HERE - 然而你也可以使用更好的布局工具:GRID .

建议:在 html 中使用 class 属性，然后在 css 中使用该类名 - 在 css 中直接使用 html 标签名称不是好的做法 - 尽可能避免使用