fluid-layout - text-overflow 省略記号を使用した固定幅セクション間の可変幅セクション

Question

私はこれらの要素を調整するのに非常に苦労しています..

これが私がする必要があることの視覚的な説明です。トリッキーな部分は、1 つの要素を 72 ピクセルにし、別の要素を 10 ピクセルにし、もう 1 つの要素を「残り」にすることです。

これが私の最初の試みです: 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 サポートのみが必要です。