3列，中间一列，宽度灵活

Question

我想要一个包含三个相邻 div 的布局。侧 div 具有静态宽度（可能通过 javascript 更改），中心 div 填充剩余区域。当第一个 div 的大小发生变化时，它只影响中心的一个。它类似于由三列组成的表格（具有动态渲染）。

好的，但问题出在哪里。 问题是，如果我将左浮动 div 放入第一列，并在第二列和第三列中阻止 div，则阻止 div 的行为方式很奇怪。它们在第一列的浮动 div 下方的列中呈现。

一个例子。 在第一列和第二列中，我有浮动 div，第三列中有块 div。块 div 围绕浮动 div 的高度向下移动。中心列中的 Div 不会在其 y 位置移动，只是它具有 float left 属性。

我希望三个布局 div 中的每一个都相互独立。我不知道为什么第三列中的元素在前两列中浮动 div（带有 float 属性）。

代码：

<div style="margin: auto; display: table; width: 260px;">
        <div style="display: table-row;">
            <div style="display: table-cell; width: 100px;">

                <div style="float: left; width: 40px; height: 50px;">COL1</div> 

            </div>
            <div style="display: table-cell;">

                <div style="float: left; height: 50px;  width: 40px;">COL2</div>

            </div style="display: table-cell; width: 100px;">
            <div class="sideContainer">

                <div>COL3</div>

            </div>
        </div>
</div>

结果： result

如何解决。如何使所有布局 div（列）彼此独立。有什么想法吗？

Answer 1

您可以通过将 col1 和 col3 以固定宽度向左和向右浮动来做到这一点。

然后给col2添加一个左右边距，等于col1和col3的宽度。

这为您提供了三列； col1 和 col3 具有固定宽度，而 col2 填充可用宽度：

（col2 的内容框为蓝色，其边距为黄色）

<div class='container'>
    <div class='right'>
        col3
    </div>
    <div class='left'>
        col1
    </div>
    <div class='middle'>
        col2
    </div>
</div>



.container {
    overflow: hidden;
}
.right {
    float: right;
    width: 100px;
}
.left {
    float: left;
    width: 100px;
}
.middle {
    margin: 0 100px;
}

在这里试试：http://jsfiddle.net/22YBU/

顺便说一句，如果您需要显示：表格，显示：表格行和显示：表格单元格，请使用表格；-)