并排两个div并将clearflex固定为第三个div

Question

我正在尝试将第三格放在下面，而不是放在一边。但是我做得不好。我如何才能实现正确的clearfix / clear flex apply并将第三个div放在该两个div下。

.cards {
    display: flex;
    width: 100%;
    height: 260px;
    margin-bottom: 25px;
    border: 1px solid #ecf0f1;
}

header {
  width: 40%;
  background: red;
}

main {
  width: 60%;
  background: blue;
}

#footer {
  background: black;
  width: 100%;
}

<div class="cards">
            <header>
            </header>
            <main>
                <h1>TOPIC</h1>
                <nav>
                    <a href="">Example</a>
                    <a href="">Example</a>
                </nav>
                <table>
                    <tr>
                        <th>Example</th>
                        <td>Example</td>
                    </tr>
                    <tr>
                        <th>Example</th>
                        <td>Example
                        </td>
                    </tr>
                    <tr>
                        <th>Example</th>
                        <td>Example</td>
                    </tr>
                    <tr>
                        <th>Example</th>
                        <td>Example</td>
                    </tr>
                </table>
            </main>
           <div id="footer"></div>
        </div>

您可以检查代码段。谢谢。

Answer 1

您也可以使用CSS网格：

.cards {
  display: grid;
  grid-template:
    "header main"
    "footer footer";
  grid-template-columns: 40% 60%;
    width: 100%;
    height: 260px;
    margin-bottom: 25px;
    border: 1px solid #ecf0f1;
}

header {
  grid-area: header;
  background: red;
}

main {
  grid-area: main;
  background: blue;
}

#footer {
grid-area: footer;
  background: black;
}

<div class="cards">
    <header>
    </header>
    <main>
        <h1>TOPIC</h1>
        <nav>
            <a href="">Example</a>
            <a href="">Example</a>
        </nav>
        <table>
            <tr>
                <th>Example</th>
                <td>Example</td>
            </tr>
            <tr>
                <th>Example</th>
                <td>Example
                </td>
            </tr>
            <tr>
                <th>Example</th>
                <td>Example</td>
            </tr>
            <tr>
                <th>Example</th>
                <td>Example</td>
            </tr>
        </table>
    </main>
   <div id="footer"></div>
</div>