我想要一个由三个相邻的div组成的布局。 Side div具有静态宽度(可能会通过javascript更改)，center div填充剩余区域。当第一个div的大小改变时，它只影响中心的大小。它与由三列组成的表(动态渲染)类似。
好的，但问题在哪里
问题是如果我将浮动左div放入第一列，并在第二和第三列中阻止div，则块div以奇怪的方式表现。它们在第一列的浮动div之下的列中。
一个例子。
在第一列和第二列中，我有浮动div，并在第三列中显示块div。块div在浮动div的高度左右移动。中心列中的div不会在其位置移动，只有它具有浮动左属性。
我想让三个布局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(列)彼此独立。有任何想法吗？
解决方法
您可以通过将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/
BTW如果需要显示：table，display：table-row和display：table-cell，使用表;-)
