固定宽度的流体宽度部分,带有文本溢出省略号

时间:2013-01-14 05:30:10

标签: css fluid-layout css3

我在协调这些元素方面遇到了很大的困难..

以下是我需要做的视觉解释。棘手的部分是因为我希望一个元素为72px,另一个元素为10px,另一个元素为“其余元素”。

enter image description here

这是我的第一次尝试: 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支持。

0 个答案:

没有答案