html - 显示值(value)和信息的自定义小部件

Question

我正在尝试实现一个看起来像这样的小部件:

想法是我有一个值，它有一些额外的信息。问题是这个小部件必须自动调整到值的宽度，而不是附加信息的宽度。允许附加信息部分向下填充尽可能多的空间并包装内容。

到目前为止我有this然而，这个问题是附加信息部分不计入小部件的高度，因此如果它更长，它会溢出到它下面的东西之上，或者不会扩展包含的 div。

请帮忙

Answer 1

经过大量搜索，我认为问题出在 position:absolute 上，到目前为止，我阅读的建议是通过 JS 处理它。我不确定你是否可以接受，但我已经能够在这里解决它:

https://jsfiddle.net/anut12tp/5/

基本上，我已将内部跨度设置为绝对，但在加载时我调用 JS 将其最大宽度设置为其父级，然后将其显示更改为内联 block 并将位置更改为相对。

请查看并告诉我这是否适合您。谢谢。