Question

我正在构建一个布局中有3列的结构。我得到了两个未解决的问题：

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

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

＆＃13;

zoomScale

＆＃13;

Answer 1

其中有两个问题：（1）您忘记关闭包含<div>的{{1}}。（2）添加<table>以使box-sizing: border-box;成为宽度的一部分，将所有3列组合在一起，宽度为100％。

另外，不要忘记清除浮子，例如在容器上设置padding，请参阅here和here了解详情。

overflow: hidden;

* {
  box-sizing: border-box;
}

Answer 2

对于像这样的布局，CSS Flexbox很容易成为最酷的东西。除了移除浮子（一种令人厌恶的方式制造柱子，没有冒犯）我还必须在第3个开始之前结束第二个div。这可能是你唯一的问题，但就像我说的那样，左右浮动的东西制作柱子与flex相比非常粗略。

＆＃13;

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

＆＃13;

多列布局中的阵容项目

2 个答案: