CSS:两列,平衡高度,优先选择左列

时间:2009-11-04 20:13:26

标签: css

我有一个有序的电影列表。每部电影都有名称和描述。描述长度各不相同。我将这些电影逐一列在两列中,大致如下:

1. Blues Brothers                      |  4. Lord of the Rings
   Cheesy movie about two guys.        |     A hobbit and his buddies go
                                       |     to destroy some ring.
2. Jurassic Park.                      |
   Some guy makes dinosaurs and some   |  5. Can't Think Of Any More
   chick uses 3D UNIX!                 |     Lorem ipsum dolor sit amet.
                                       |     Dolor sit amet lorem ipsum!!!
3. Wayne's World                       |
   Party movie deluxe!                 |  6. This Is The Last
                                       |     Now we're not balanced!
                                       |     Pretty messed up.

以上内容应该让您了解今天的样子。我目前正在通过获取电影列表并将其分成两半然后依次渲染每一半并将两半彼此相邻的方式来实现这一目标。

但是有一个问题!想象一下,右栏中的电影都有比左栏更长的描述。然后高度平衡就会消失!

那么有没有非JavaScript的方式来平衡这种事情?如果是这样,哪些浏览器支持它?

2 个答案:

答案 0 :(得分:2)

按照您的方式进行操作,但使用重复的背景图像,并在列div的容器中心放下一行。我相信这种技术被称为“faux columns”。

答案 1 :(得分:1)

不幸的是,溢出内容的唯一非编程方式是CSS3的草稿状态。没有可靠的方法将内容泄漏到CSS2.1中的新列中。

请参阅以下链接,了解溢出内容的草稿选择器:

http://www.w3.org/TR/css3-multicol/