html - 多列布局中的阵容元素

我正在构建一个在布局中具有3列的结构。我有2个未解决的问题：


我想在中间列中插入一个表。但是，当我这样做时，表格在列的底部放错了位置。
第三列也以与表格相同的方式放错位置。


我想知道为什么以及将表格放回到列顶部的任何解决方案。

<div style="width=100%;">

    <div style="float: left; width: 25%; padding: 5px; height: 100%; background: #F2F2F2">
        <h1>The first column</h1>
    </div>

    <div style="float: left; width: 50%; padding: 5px">
        <h1>The second column</h1>
        <p>A paragraph in place</p>
        <table>
            <tr>
                <th>Category</th>
                <th>Title</th>
                <th></th>
            </tr>
        </table>

    <div style="float: right; width: 25%; padding: 5px; height: 100%; background: #EFF7FF">
        <h1>The third column</h1>
    </div>

</div>

最佳答案

CSS Flexbox很容易成为此类布局中最酷的东西。除了移除花车（一种令人作呕的制造列的方式，没有冒犯性）之外，我还必须在第三个div开始之前结束第二个div。那可能是您唯一的问题，但是就像我说的那样，与flex相比，左右浮动东西来创建列是相当困难的。

<div style="display: flex">

    <div style="padding: 5px; height: 100%; background: #F2F2F2">
        <h1>The first column</h1>
    </div>

    <div style=" width: 50%; padding: 5px">
        <h1>The second column</h1>
        <p>A paragraph in place</p>
        <table>
            <tr>
                <th>Category</th>
                <th>Title</th>
                <th></th>
            </tr>
        </table>
      </div>
    <div style="width: 25%; padding: 5px; height: 100%; background: #EFF7FF">
        <h1>The third column</h1>
    </div>
</div>