Question

所以我的<nav>标记中有一个<header>，在其下方我有一个显示日期的<div>。现在的问题是，我的设计是这样的，我不能将<div>日期放在<header>内。但是，由于我使用了响应式设计，因此在较小的屏幕分辨率时，我必须交换<nav>和日期<div>。

我已经阅读了S.O并且我已经看到了几个使用CSS来交换2 <div>的修复，但是我无法使用它来处理我的代码。我不知道如何解决这个问题，说实话，所有的帮助都非常感激。这是代码段：

<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>

仅使用CSS交换导航和div垂直

1 个答案: