css - 仅使用 CSS 将左列、右列垂直对齐到不同高度的动态中间列？

Question

在下面的 jsfiddle 示例中，我希望左侧列 (#left) 和右侧列 (#right) 垂直对齐到中间列 (#middle) 的中间。中间列 (#middle) 的高度可以变化。

这适用于移动设备，因此使用

text-overflow:ellipsis; 
white-space:nowrap; 
overflow:hidden; 

这部分似乎在屏幕调整大小时按要求工作。

仅使用 CSS(不使用 javascript)可以实现吗？

参见:http://jsfiddle.net/TGsdg/4/

Answer 1

唯一的方法是使用 display:table(-cell) with table-layout:fixed。但是，这仅在您的左右列可以具有固定宽度的情况下才有效:

http://jsfiddle.net/TGsdg/7/