我已经搜索并寻找了几处与我的问题相似的帖子,但是没有找到让我更接近解决方案的答案。

因此,我对DIV设置有些困惑,我有一个包围两个DIV的容器。第一个DIV将带有徽标,徽标应始终位于左上角(定位为一个亲戚)。现在,第二个DIV应该始终从Container的右下角开始,并具有一些可变的Text(定位为一个绝对值)。

如果第二个DIV中的Text短,则一切都很好,但是,如果Text变大并且变得大于徽标,则Text将在Container顶部之外生长。

我的目标是,如果文本变大,则容器以绝对DIV增长。

我设置了一些小提琴来向您展示我的问题。

[jsfiddle.net/jb3drnb0][1]


我想念什么?

最佳答案

非常感谢您的所有建议。这使我对这个问题有不同的看法。我尝试过浮动,虽然接近但并不完美。 Sidd关于Javascript的建议最终使我尝试CSS Calc函数,并使用带有Width-Parameter的Inline-Blocks,并使用text-align和vertical-align来实现我想要的功能。

因此,这是针对所有感兴趣的人的更新的fiddle。 :)

.container { position: relative; height: auto; border: 1px solid #00f; overflow: visible; }

.left { display: inline-block; width: 160px; height: auto; vertical-align: top; }

.right { display: inline-block; height: auto; width: calc(100% - 170px); vertical-align: bottom; text-align: right; }

10-05 20:59
查看更多