2

这是我需要实现的布局：

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

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

我首先尝试制作每个元素inline-block，但这不会让 4 坚持到右边。当容器被调整到足够小的尺寸时，将它向右浮动会导致它在行的其余部分下方回绕；相反，元素 2 应该变小。

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

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

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

4

1 回答 1

-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 添加更多文本。希望这会有所帮助，因为它不包括你想要的一切：）

于 2013-08-28T23:38:04.233 回答