如何制作Google阅读器/ Gmail的列表视图

Question

我想创建一个类似于Google阅读器列表视图的用户界面：

http://dl.dropbox.com/u/2792776/screenshots/2011-12-24_1807.png

即，

1. 这颗恒星有一定的宽度/高度，并固定在最左边的
上
2. 然后是主题和身体预览。调整窗口大小时，此内容会响应更窄的窗口而逐渐消失
3. 日期具有明确的宽度/高度并固定在最右边

挑战是在调整窗口大小时使行为正确。当窗口缩小时唯一应该改变的是，身体预览右侧的单词应该逐渐消失（当没有更多时，标题中的单词应该消失）：

Answer 1

您可以使用绝对和相对CSS定位来创建各种约束系统。

鉴于此HTML：

<ul>
    <li>
        <div class="left">Left content</div>
        <div class="center">Really long center content that will get truncated if you were to resize the window</div>
        <div class="right">Right content</div>
    </li>
</ul>

如果父级（li）位于相对位置，则可以使用div / left / {对子级（right元素）使用绝对定位根据需要{1}}和width / top / bottom。以下是一个例子：

height

我在http://jsfiddle.net/69TVf/1/发布了一个实例。