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 回答