3列布局，相同高度，中间列全尺寸。如何在没有“表格单元”的情况下做到这一点答案

【问题标题】：3 column layout, same height, middle column full size. How to do it without "table-cell"3列布局，相同高度，中间列全尺寸。如何在没有“表格单元”的情况下做到这一点
【发布时间】：2013-10-26 23:56:18
【问题描述】：

如何在哪里制作3列布局：

左栏是固定宽度
中间列是自动宽度（不固定）
右栏是固定宽度

所有列的高度都相等（但具体高度未知）

例子：

我知道我可以通过使用表格或display:table-cell 来做到这一点，但是是否可以不使用表格来做到这一点？我会选择table-cell，但它不适用于较旧的 ios/android 移动设备和较旧的浏览器。

如果没有table-cell，是否有一些 css hack 可用？

编辑：在这种特殊情况下，我只想设置全高颜色背景（左：颜色#A，中：颜色#B，右：颜色#C）

Edit2：我觉得 1999 年的桌子布局 poltergeist/ghost 在我面前笑了

Edit3：请不要使用js

【问题讨论】：

我希望我能再次为 Edit2 +1。

标签： html css

【解决方案1】：

您是否尝试过使用单独的

来绘制所需的背景？在这里，我创建了一个示例http://plnkr.co/edit/WOaF3SZ9N8sswsxbZ116?p=preview

【讨论】：

np！这是一个很好的练习:)

【解决方案2】：

看看我的小提琴：

http://jsfiddle.net/RB9JZ/1/

我不得不使用 javascript 使列的高度相同：

$(".col").setMinHeight(3);

在 setMinHeight(3) 中，3 = 列数，并为每一列指定一个 col 类或您想要的任何类。

【讨论】：

谢谢，但我宁愿选择 table-cell 而不是 js/jquery
当然。我不相信有任何其他方法可以使列的高度相同。如果您知道中间一列总是最长的，您可能会使用后台 hack。
你的回答很好，但是“我想相信”没有表格/js 有一些技巧可以做到：)
你知道是否有一列永远是最高的吗？
啊，好吧。我希望你能找到解决方案，我也很想知道。

【解决方案3】：

这是一个有趣的问题。由于 Rich 已经计算出了这些列，我将解决让所有列“高度相同”的问题。就像你说的，如果没有表行为，这很难做到。我一直在做的是在包含所有列的 div 上使用背景图像。这个 div 会自动拉伸到最高列的高度，如果你有一个重复的背景，它会给出匹配列的错觉。由于您有 3 列的特殊情况，中间宽度为流体宽度，您可能需要两个 div 来包装 3 列，并有两个背景图像。一个左对齐，一个右对齐。如果这没有意义，请告诉我。

【讨论】：

检查@katranci 的答案，他做到了！我要求不同的背景颜色，他做到了。（我不介意他使用边框来做到这一点，但他做到了。）

【解决方案4】：

也许是这个变种：

display:block;
height:100px;

【讨论】：