javascript - 带有 chop 文本和元素的行坚持在右边

Question

这是我需要实现的布局:

   1               2                 3                                  4
____________________________________________                    ________________
|     |                         |          |                    |              |
|  *  |  Potentially Long Text  |  ******  |                    |  **********  |
|_____|_________________________|__________|                    |______________|

如果元素 2 中的文本变得太长以至于 3 撞到 4，则文本应该被 chop 并附加一个省略号。任何元素的内容或元素本身都不应换行。

我首先尝试制作每个元素 inline-block，但这不会让 4 粘在右边。当容器的大小调整得足够小时，将其正确 float 会使其包裹在该行的其余部分下方；相反，元素 2 应该变小。

然后我尝试使用表格执行此操作，但我无法通过硬编码(最大)宽度 chop 2 中的文本。 (参见 http://jsfiddle.net/W7QLj/1/)

基本上，2 应该尽可能小以包含所有文本，4 应该贴在右边，2 和 3 之间不应该有空格，如果空间用完了，2 应该变小以适合所有人.元素 4 的宽度是可变的。

任何人都可以建议一种策略来获得我需要的行为吗？如有必要，我准备加入一些 javascript。

Answer 1

我建议使用网格。我立刻想到了 Cris Coyiers:“不要过度考虑网格”。请参阅:http://css-tricks.com/dont-overthink-it-grids/

<div class="grid"> 
  <div class="col-1-4">
    <div class="module">
      <h3>box1</h3>
    </div>
  </div>

  <div class="col-1-4">
   ....
</div>

我用他的代码做了这样的:http://jsfiddle.net/W7QLj/74/

尝试向 box2 添加更多文本。希望这会有所帮助，因为它不包括您想要的一切:)