fluid-layout - 带有文本溢出省略号的固定宽度部分之间的流体宽度部分

Question

我在调和这些元素时遇到了很大的困难。

这是我需要做什么的视觉解释。棘手的部分是因为我希望一个元素为 72 像素，另一个为 10 像素，而另一个占据“其余部分”。

这是我的第一次尝试：http: //jsfiddle.net/cutcopypaste/7gXRg/

HTML：

<ul id="albums" class="rows">
    <li>
      <a>
        <img class="thumb" src="http://placehold.it/350x150"/>
        <span>
          <em>An item with a great deal of text that continues on and on but should not wrap to a new line</em>
          <strong>Short content</strong>
         </span>
       </a>
    </li>
    <li>
      <a>
        <img class="thumb" src="http://placehold.it/350x150"/>
        <span>
          <em>Some ofr words,</em>
          <strong>An item with a great deal of text that continues on and on but should not wrap to a new line</strong>
         </span>
       </a>
    </li>
    <li>
      <a>
        <img class="thumb" src="http://placehold.it/350x150"/>
        <span>
          <em>This and That and that and this and what and for and never you miss</em>
          <strong>Johnnyycakes</strong>
         </span>
       </a>
    </li>
</ul>

这里正在尝试使用表格，但它似乎真的不起作用！ http://jsfiddle.net/cutcopypaste/PwBms/

只需要 webkit 支持。