1

如何进行 3 列布局，其中：

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

并且所有列的高度都相等（但确切的高度未知）

例子：

例子

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

有没有一些css hack可以做到这一点table-cell？

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

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

Edit3：请不要 js

4

4 回答 4

3

您是否尝试过使用单独的 <div> 来绘制所需的背景？在这里，我创建了一个示例http://plnkr.co/edit/WOaF3SZ9N8sswsxbZ116?p=preview

于 2013-10-27T00:40:00.737 回答
1

看看我的小提琴：

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

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

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

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

于 2013-10-27T00:22:53.617 回答
1

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

于 2013-10-27T00:42:11.880 回答
0

也许这个变种：

display:block;
height:100px;
于 2013-10-27T00:12:52.163 回答