为什么在这种情况下最大宽度不工作？

Question

jsFiddle

在这个例子中，两个引号的宽度都相同。我想要发生的是报价的宽度取决于报价的长度，但不能超过200px。

所以第一个报价应该有200px的宽度，但第二个报价应该动态地为60px，在第一行的5之后结束。

我该怎么做？

CSS

.inner_quote { 
    background:RGBA(255,250,205,.4); 
    margin-left:50px; 
    max-width:200px; 
    display:block; 
} 

HTML

<span class="inner_quote"> 
    1 23 345 421 6ffa vvxb 1 23 345 421 6ffa vvxb 1 23 345 421 6ffa vvxb 1 23 345 421 6ffa vvxb 1 23 345 421 6ffa vvxb 1 23 345 421 6ffa vvxb 1 23 345 421 6ffa vvxb 1 23 345 421 6ffa vvxb 1 23 345 421 6ffa vvxb 1 23 345 421 6ffa vvxb 
</span> 
... 
<span class="inner_quote"> 
    1 23 345 
    <br> 
    5552 
</span> 

Answer 1

你试过display:inline-block？

Answer 2

宽度的问题是到您的显示：块; on .inner_quote;块将填充可用宽...

现在，您可以通过浮动解决这个问题（浮动：左;），但你需要做一些浮动结算以保持整洁......

Answer 3

property-display：block尝试占用所有可用的宽度。

由于您在第一个范围内将max-width属性设置为400px，因此不会再继续。尽管在第二种情况下像素需要较少，但display：block属性尽可能地拉伸容器，然后受到所提及的最大宽度的限制。

property-display：inline-block将解决此问题，因为它维护块结构并只占用容器所需的空间。