html - 仅使用 CSS 垂直交换 nav 和 div

Question

所以我有一个 <nav>在我的 <header>标签，就在它下面我有一个 <div>显示日期。现在的问题是，我的设计方式使我无法放置 <div>对于我的 <header> 中的日期.但是，由于我正在使用响应式设计，因此我必须交换 <nav>和日期 <div>在较小的屏幕分辨率上时。

我读过关于 S.O 的文章，我看到了几个使用 CSS 进行交换的修复程序 2 <div> s 但我无法让他们使用我的代码。老实说，我不知道如何解决这个问题，非常感谢所有帮助。这是代码片段:

<header>
    <div id="logo">
        <img src="images/logo.png" title="Site Name" alt="logo">
    </div>

    <nav>
        <ul>
            <li><a href="#">Day</a></li>
            <li><a href="#">Week</a></li>
            <li><a href="#">Month</a></li>
            <li><a href="#">From-To</a></li>
        </ul>
    </nav>
</header>

<div id="date">
    <p>Monday 09/03/15 16:16</p>
</div>

编辑:根据要求，这里是我尝试实现但没有成功的修复程序。

HTML

<div class="swapHack">
    <header>
        <div id="logo">
            <img src="images/logo.png" title="Site Name" alt="logo">
        </div>

        <nav>
            <ul>
                <li><a href="#">Day</a></li>
                <li><a href="#">Week</a></li>
                <li><a href="#">Month</a></li>
                <li><a href="#">From-To</a></li>
            </ul>
        </nav>
    </header>

    <div id="date">
        <p>Monday 09/03/15 16:16</p>
    </div>
</div>

CSS

.swapHack{
      display:table;
      width: 100%;
    }

    .#date {
      display: table-header-group;
    }

    .nav {
      display: table-footer-group;
    }

谢谢。

Answer 1

建议的交换确实有效。你的 CSS 有一些错误。您需要在您的 css 中删除 nav 和 #date 之前的句点“.”。

.swapHack{
      display:table;
      width: 100%;
    }

    #date {
      display: table-header-group;
    }

    nav {
      display: table-footer-group;
    }

<div class="swapHack>"
    <header>
        <div id="logo">
            <img src="images/logo.png" title="Site Name" alt="logo" />
        </div>

        <nav>
            <ul>
                <li><a href="#">Day</a></li>
                <li><a href="#">Week</a></li>
                <li><a href="#">Month</a></li>
                <li><a href="#">From-To</a></li>
            </ul>
        </nav>
    </header>

    <div id="date">
        <p>Monday 09/03/15 16:16</p>
    </div>
</div>