css - 如果另一个区域随着 CSS 增长，如何缩小一个区域？

Question

我需要使用 html 和 CSS 实现一种效果：

+-------------------+-----------------+ 
|some text bla bla  |other text here  |
+-------------------+-----------------+

+--------------+----------------------+
| some text b..|bigger other text here|
+--------------+----------------------+ 

主容器的大小是固定的。而且我需要第二个区域总是增长，如果文本溢出，首先会缩小。

CSS可以吗？

Answer 1

我认为使用 css 是不可能的，即使使用 css3

它适用于 javascript 和明确定义的宽度

Answer 2

我能想到的最佳解决方案（仅使用 CSS）是position:absolute;在右侧的 div/span/p/whatever 上使用，因此它将保持在左侧元素的顶部。这是一个活生生的例子：http: //jsfiddle.net/Cthulhu/6DrQX/

然而，这并不是一个很好的解决方案，所以我也会像 stefan bachert 提议的那样使用 javascript。

Answer 3

检查我的这个较旧的答案：如何用溢出组织这个布局？

请注意，HTML 中“区域”的顺序是颠倒的。这可能适用于所有现代浏览器，但我不记得了，所以你应该在你需要支持的浏览器中测试它。

见：http: //jsfiddle.net/thirtydot/sxeu9/

Answer 4

您是否尝试过使用水平列表？我不确定这会有多有效。