CSS 3列，中间一列宽度灵活
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7292021/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
3 columns, middle one with flexible width
提问by cartoon_20
I'd like to have a layout that consist of three adjacent divs. Side divs have static width (it may change via javascript) and center div fills a remaining area. When the first div's size changes it affect only the center one. It is similar to table (with dynamic rendering) that consist of three columns.
我想要一个由三个相邻 div 组成的布局。侧边 div 具有静态宽度（它可能会通过 javascript 更改）并且中心 div 填充剩余区域。当第一个 div 的大小发生变化时，它只会影响中心的。它类似于由三列组成的表格（具有动态渲染）。
Ok, but where is the problem. The problem is that if I put floating-left div into the first column, and block div in the second and third one, block divs behave in a strange way. They are rendered in their column below floating div from the first column.
好的，但问题出在哪里。问题是，如果我将左浮动 div 放入第一列，并在第二列和第三列中阻止 div，则阻止 div 的行为会很奇怪。它们呈现在第一列浮动 div 下方的列中。
An example. In the first and second column I have floating div, and block div in the third column. The block div is shifted down around the height of floating divs. Div in the center column is not shifted in his y position only that it has float left property.
一个例子。在第一列和第二列中，我有浮动 div，在第三列中有块 div。块 div 围绕浮动 div 的高度向下移动。中心列中的 Div 不会在他的 y 位置移动，只是它具有浮动左属性。
I'd like to each of the three layouting divs to be independent on each other. I have no idea why elements in the third column floats div in first two columns (with float property).
我希望三个布局 div 中的每一个都相互独立。我不知道为什么第三列中的元素在前两列中浮动 div（具有浮动属性）。
CODE:
代码：
<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>
and result: result
结果： 结果
How to fix that. How to make all layouting divs (columns) to be independent on each other. Any ideas?
如何解决这个问题。如何让所有布局 div（列）相互独立。有任何想法吗？
回答by Arnaud Le Blanc
You can do that by floating col1 and col3 to the left and to the right, with a fixed width.
您可以通过将 col1 和 col3 以固定宽度向左和向右浮动来实现。
Then add a left and right margin to col2 equal to the width of col1 and col3.
然后向col2添加一个左右边距，等于col1和col3的宽度。
This gives you three columns; col1 and col3 having a fixed width and col2 filling the available width:
这为您提供了三列；col1 和 col3 具有固定宽度，col2 填充可用宽度：
(col2's content box in blue, and its margins in yellow)
（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;
}
Try it here: http://jsfiddle.net/22YBU/
在这里试试：http: //jsfiddle.net/22YBU/
BTW if you need display: table, display: table-row and display: table-cell, use a table ;-)
顺便说一句，如果您需要显示：表格，显示：表格行和显示：表格单元格，请使用表格;-)
