CSS div位置绝对值,高度可变以扩展容器

阳光明媚

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

因此,我对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来实现我想要的功能。

因此,这是针对感兴趣的所有人的最新小提琴:)

.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; }

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

CSS HTML img位置的绝对值

来自分类Dev

可变高度上的CSS绝对位置

来自分类Dev

CSS-位置绝对值不能完美地与CSS变量居中

来自分类Dev

datepicker的css位置:绝对值给出按钮的正确位置,但按下时不正确

来自分类Dev

CSS相对滑过绝对值以悬停

来自分类Dev

使用vh和vw单元时CSS位置绝对值失败

来自分类Dev

如何在悬浮状态下设置CSS位置的绝对值

来自分类Dev

如何在滚动区域中定位绝对值?(CSS)

来自分类Dev

在CSS中扩展div高度

来自分类Dev

在CSS中扩展div高度

来自分类Dev

位置绝对值和高度为100%的叠加div不随滚动条移动

来自分类Dev

CSS在容器中添加两个绝对位置的div

来自分类Dev

CSS:绝对改变div宽度的位置

来自分类Dev

放置在div容器中的图像的高度-CSS

来自分类Dev

放置在div容器中的图像的高度-CSS

来自分类Dev

根据位置绝对值扩展跨度宽度

来自分类Dev

设置高度100%,但CSS div不会扩展

来自分类Dev

CSS全屏显示-绝对位置与高度的100%

来自分类Dev

CSS Flexbox位置:绝对容器未显示所有元素

来自分类Dev

绝对并排CSS位置

来自分类Dev

在具有位置:绝对值的Div末尾添加页脚

来自分类Dev

CSS Grid的高度大于其容器div的高度

来自分类Dev

CSS或JS方式来设置绝对div高度100%

来自分类Dev

为什么CSS 100%-100%在没有绝对值的情况下不能工作?

来自分类Dev

CSS:绝对位置div高于父div

来自分类Dev

CSS-容器高度与父div高度相同,除非父div小于容器div

来自分类Dev

如何使用 CSS 使用子 div 扩展 div 的高度

来自分类Dev

CSS容器位置

来自分类Dev

css。绝对位置DIV中的垂直中心