如何在div内的跨度被包裹时调整div的大小？

目前我有一个最大宽度为200px的div，div内有一些带有属性white-space的跨度：nowrap和display：inline-block。如何在div内的跨度被包裹时调整div的大小？

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

当前行为是当跨度A和跨度B的长度超过div的最大宽度时，跨度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的宽度没有根据跨度的长度调整大小。它总是有200px的宽度，这会导致跨度后出现空白空间的问题。

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

任何人都可以帮助我吗？我不直接要求回答。有些解释会更好。

来源

2016-09-15 Francis Zhu

解释：使容器收缩到合适子元素，因为他们包装]（http://stackoverflow.com/q/37406353/3597276） –

你做了什么期望发生呢？如果A + B不能放在同一行上，并且您放入了nowrap，所以跨度的内容不能进入下一行，则inline-block属性会将B推入下一行。 – softwarenewbie7331

B被推入下一行后，A + B的第一行会变短，对吗？我期望看到div的宽度应该比A或B或C的长度宽一点。但是实际结果是跨度A（或B或C）之间有很多空白区域，和div的右侧。 –

使用max-width将不允许div（在这种情况下，200像素）大于给定值更宽使用min-width代替max-width可能会帮助你...

在类

来源

2016-09-15 00:58:07

：）谢谢你的回答。实际上，我不想让div更宽，相反，我想div更窄。 –

那么你应该把'div.a'设置为'display：inline-block;' –

，空白默认为正常，浏览器忽略空的空间，您可以添加边框，看！

来源

2016-09-15 01:02:44

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

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

你可能不得不决定如何处理溢出-X，如果你继续有超过100像素

你可以尝试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>

来源

2016-09-15 01:16:49 softwarenewbie7331

谢谢你的支持。当内容超过最大宽度时，我的确需要处理这种情况的溢出。 –

强制A和B在同一行不是我想要的。我想要的是只要不超过div的最大宽度，就在同一行中添加span。一旦它们超过最大值，那么导致该情况的跨度将被包裹到下一行中。 –

看看https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – softwarenewbie7331

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

来源

2016-09-15 01:42:25 Gowtham

感谢您的回答，但我不希望所有的跨度在同一行。：） –

好吧然后你想怎么样??，任何截图exxed输出将很容易我 – Gowtham

http://stackoverflow.com/questions/37406353/make-container-shrink-to-fit-child-elements-as -they-wrap清楚地说明了我的问题，对于我以前的糟糕的问题陈述感到抱歉。：） –

据我了解，你的问题似乎对的 ...尝试删除此样式并使用默认设置，该默认设置应为display: inline; ...

尽管跨度以内联形式运行，但它也以块形式运行，这意味着它将分解当其父文件没有更多可用宽度时，生成所述空白空间。

编辑

忘了提...此外，除去white-space: nowrap; ...

来源

2016-09-15 02:57:32

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

来源

2016-09-15 03:51:01

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

如何在div内的跨度被包裹时调整div的大小？

回答

相关问题