使用 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 来完成这件事：

顶部有一个固定的导航栏（已经可以）
带有侧边栏和 "article" 区域的主区域（需要固定位置并对齐其部分）
文章区需要放在侧边栏的右侧，但现在显示在侧边栏的底部。
页脚下面显示了一些奇怪的横幅（仅当鼠标光标未悬停时），就像这里显示的那样：

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. I use flexbox in this solution - great tutorial about this is HERE - however you can also use even better tool for layouts: GRID.

建议：在html中使用class属性，然后在css中使用那个class名称-直接html 标签名称在 css 中不是好的做法 - 如果可能的话避免它

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

Positioning sidebar and article below navbar with html and css

html

css

position

sidebar

alignment