自定义小部件，用于显示值和信息

Question

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

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

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

请帮忙

Answer 1

你是说这个意思吗？父元素上的display: inline-block;和position:absolute;以及info元素上的position:absolute;似乎可以解决问题。

#wrapper{  
  display: inline-block;
  height:100%;
  position:relative;
}
#header, #info{
  border:black 2px solid;
}
#info{
  position:absolute;
}

<div id="wrapper">
  <div id="header">Value xyz</div>
  <div id="info">Info Info Info Info Info</div>
 </div>

Answer 2

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

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

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

请看一下，如果这对你有用，请告诉我。谢谢。

Answer 3

以下是您帖子中shared的修改版本。

你可以试试这个：

＆＃13;

＆＃13;

.container {
  display: block;
  position: relative;
  background: aliceblue;
  width: 200px;
}
.maxim {
   position: relative;
   width: 100%;
   max-width: 100%;
   background-color: lime;
}

＆＃13;

<div class="container">
    <header>
        <strong>12345620</strong>
        <span>description</span>   
    </header>
    <span class="maxim">
        Lorem ipsum  Lorem ipsum
    </span>    
</div>    

<div class="container">
    <header>
        <strong>1234567890</strong>
        <span>more text is here</span>   
    </header>
    <span class="maxim">
        Lorem ipsum  Lorem ipsum  Lorem ipsum  Lorem ipsum  oposum
        Lorem ipsum  Lorem ipsum  Lorem ipsum  Lorem ipsum  oposum
        Lorem ipsum  Lorem ipsum  Lorem ipsum  Lorem ipsum  oposum
    </span>    
</div> 

＆＃13;

＆＃13;

＆＃13;