当div内的span被包裹时如何调整div的大小？答案

【问题标题】：How to resize the div when the span inside div is wrapped?当div内的span被包裹时如何调整div的大小？
【发布时间】：2017-01-22 22:05:46
【问题描述】：

目前我有一个最大宽度为 200px 的 div，在 div 内有一些 span 的属性为 white-space:nowrap 和 display:inline-block。

.a {
  max-width:200px;
}

.b {
 display: inline-block; 
 white-space:nowrap;
}

<div class="a">
 <span class="b">A</span> <span class="b">B</span>
 <span class="b">C</span>
</div>

当前的行为是当 span A 和 span B 的长度超过 div 的 max-width 时， span B 被换行到下一行。

<div class="a">
 <span class="b">A</span> Empty space here
 <span class="b">B</span> Empty space here
 <span class="b">C</span> Empty space here
</div>

但是，div 的宽度并没有根据 span 的长度调整大小。它始终具有 200px 的宽度，这导致跨度后有空白空间的问题。

我想要的是确保 div 按跨度的长度调整大小，没有任何空白。

谁能帮我解决这个问题？我不是直接要求答案。一些解释会更好。

【问题讨论】：

解释：Make container shrink-to-fit child elements as they wrap
您期望会发生什么？如果 A+B 不能放在同一行并且你放了 nowrap 所以 span 的内容不能进入下一行，inline-block 属性会将 B 推到下一行。
第一个有A+B的行会在B推到下一行后变短吧？我期望看到的是 div 的宽度应该比 A 或 B 或 C 的长度宽一点。但实际结果是跨度 A（或 B 或 C）之间有很多空白和 div 的右侧。

标签： html css

【解决方案1】：

.a {
  max-width:200px;
}

.b {
 display: inline-block; 
}
.c {
 white-space:nowrap;
}

<div class="a">
  <div class="c">
   <span class="b">A</span> <span class="b">B</span>
  </div>
  <span class="b">C</span>
</div>

你可以像这样强制 A & B 在同一行，不是很优雅，我建议使用列/网格框架更容易控制这些类型的元素。

如果内容超过 100 像素，您可能必须决定如何处理溢出-x

您可以尝试使用 flexbox（作为奖励尝试为您处理额外的空白）：

.a {
  max-width:200px;
  display:flex;
  flex-direction:row;
}

.b {
 display: flex;
 flex: 1 1 100px;
}
</style>
</head>
<body>
<div class="a">
   <span class="b">A</span> <span class="b">B</span>
  <span class="b">C</span>
</div>

【讨论】：

感谢您的提醒。当内容超过最大宽度时，我确实需要一个溢出来处理这种情况。
强制 A 和 B 在同一行不是我想要的。我想要的是，只要它们不超过 div 的最大宽度，就可以在同一行中继续添加跨度。一旦它们超过最大值，那么导致这种情况的跨度将被包裹到下一行。
需要注意的是 flexbox 不能很好地与其他网格框架配合使用

【解决方案2】：

.a{
max-width:200px; 
margin:5px; 
display:inline-block; 
white-space:nowrap; 
 }

<div class="a"> 
<span class="b">A</span> Empty space here 
<span class="b">B</span> Empty space here
<span class="b">C</span> Empty space here
</div>

【讨论】：

在这种情况下，所有跨度都在同一行，这不是我想要的。 :)

【解决方案3】：

据我了解，您的问题似乎是<span> 上的display: inline-block;... 尝试删除此样式并使用默认样式，应该是display: inline;...

虽然 span 是内联形式，但它也是块形式，这意味着它会在其父级上没有更多可用宽度时分解，生成所述空白空间。

编辑

忘了提...另外，删除white-space: nowrap;...

【讨论】：

【解决方案4】：

.a {
  max-width:200px;
}

#sameline {
display:inline-block;
 white-space:nowrap;
}

<div class="a">
   <div id=sameline>
 <span class="b">A</span> Empty space here
 <span class="b">B</span> Empty space here
 <span class="b">C</span> Empty space here
    </div>
</div>

【讨论】：

感谢您的回答，但我不希望所有跨度都在同一行。 :)
好的，那你想要怎么做？？任何expexted输出的截图对我来说都很容易
stackoverflow.com/questions/37406353/… 清楚地说明了我的问题，对于我之前糟糕的问题陈述感到抱歉。 :)

【解决方案5】：

在a类中，空白默认是正常的，浏览器会忽略空白，可以加边框看看！

【讨论】：

【解决方案6】：

使用max-width 将不允许div 比给定值宽（在这种情况下为200px）使用 min-width 而不是 max-width 可能会帮助你......

【讨论】：

:) 感谢您的回答。实际上，我不想让 div 变宽，而是让 div 变窄。
那么你应该将div.a设置为display:inline-block;