多列布局中的阵容项目

Question

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

我想在中间栏插入一个table。但是，当我这样做时，列底部的 table 错位了。
第三列也和table一样错位。

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

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

Answer 1

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>

Answer 2

有两个问题：(1) 您忘记关闭包含 <table> 的 <div>。 (2) 添加 box-sizing: border-box; 使 padding 成为宽度的一部分，使所有 3 列一起成为 100% 宽度。

此外，不要忘记清除浮动，例如在容器上设置 overflow: hidden;，请参阅 here and here 了解更多信息。

* {
  box-sizing: border-box;
}

<div style="width: 100%; overflow: hidden;">

    <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> <!-- added here -->
    
    <div style="float: right; width: 25%; padding: 5px; height: 100%; background: #EFF7FF;">
        <h1>The third column</h1>
    </div> 
    
</div>

多列布局中的阵容项目

Lineup items in a multiple column layout

html

css

multiple-columns