Question

这是我需要实现的布局：

   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。

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

行截断文本和坚持右侧的元素

1 个答案: