Question

我正在制作基于浏览器的视频游戏。在游戏中，对象具有图形和标题栏。标题栏包含他们的名字，他们当前正在施法的法术，施法完成％和法术图标。对象具有由服务器确定的大小（维度）。

我想将标题栏附加到对象上。我希望标题栏显示图标，拼写名称与其内联。如果拼写图标宽度+拼写名称宽度＆gt;对象宽度，我想水平拉伸标题栏（最好将其放在对象上）

我目前看到的行为是法术名称将保持内联直到法术名称宽度+法术图标宽度＆gt;对象宽度，此时名称将显示在下一行，而不是拉伸标题栏（如果它不大，我不能尝试将其居中）。

解决方案可能包含javascript，因为游戏循环将使用javascript更新对象，包括位置，大小，图形，拼写图标，拼写名称和施法完成％。

＆＃34; supercontainer＆＃34;是对象。＆＃34;容器＆＃34;是标题栏。所以我想＆＃34;容器＆＃34;扩大规模超过＆＃34;超级容器＆＃34;宽度当＆＃34;第一＆＃34;和＆＃34;第二＆＃34;足够大了。＆＃34;第一＆＃34;的大小是固定的，因为所有拼写图标都是相同的大小。

<div class="supercontainer">
  <div class="container">
    <div class="first"></div>
    <div class="second">Words are long</div>
  </div>
</div>

css

.supercontainer {
   position: absolute;
   left: 10px; /* example */
   top: 10px; /* example */
   width: 64px;
   height: 64px;
   background-color: black;
 }

 .container {
   min-width:100px;
   background-color: red;
 }

 .first {
   height: 20px;
   width: 20px;
   background-color: blue;
   display: inline-block;
 }

 .second {
  background-color: green;
  display: inline-block;
}

以下是JSFiddle的链接：http://jsfiddle.net/ch901rL2/3/

Answer 1

如下所示更改container CSS规则会让孩子保持在1行。

.container {
  min-width:100px;
  background-color: red;
  white-space: nowrap;
  display: inline-block;    /* this make containter grow with children */
}

Answer 2

尝试更改您的.container元素：

.container {
  min-width:100px;
  background-color: red;
  display: inline-block; //adding this will allow it to grow according to the text
}

此外，将 white-space: no-wrap;添加到所需的元素，例如.second。

如何扩展div大于父级

2 个答案: