Question

我有点像html：

<div id="container" style="position: relative; width: 200px; height: 20px">
  <div id="label" style="float: left">The text goes here, and it can get long</div>
  <div id="someImg1" style="float: right"><img ... /></div>
  <div id="someImg2" style="float: right"><img ... /></div>
</div>

所以基本上，我有一个固定的宽度和高度容器，一些文本被推到容器的左边，两个图像向上推到右端。

我的问题：我希望文本在左侧占用尽可能多的空间，直到右侧的图像（如果文本足够长），而不将图像从容器中推出。如果文本不适合，隐藏文本的x溢出是很好的（虽然显示...将是理想的，我不知道一个简单快捷的方法来知道何时这样做）。我不能只用overflow-x: hidden使标签成为固定宽度，因为这些图像中的一个或两个实际上可能不存在于容器中，文本应尽可能多地填充空间。

示例：给定文本：“这是我的文本，但它很长”应该看起来像：

 +---------------------------------------+
 | Here is my text, it is l +---+  +---+ |
 |                          +-1-+  +-2-+ |
 +---------------------------------------+

OR

 +---------------------------------------+
 | Here is my text, it is long th  +---+ |
 |                                 +-2-+ |
 +---------------------------------------+

取决于图像1是否在容器上绘制

Answer 1

尝试使用width

在文本容器上设置固定的overflow:hidden

Answer 2

这样的东西？ float救援！

http://jsfiddle.net/jZpWf/5/

编辑：我无法测试IE6，它现在有效吗？（LINK CHANGED）

用浮动div填充空白区域

2 个答案: