爲什麼在這種情況下最大寬度不工作？

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將解決此問題，因爲它維護塊結構並只佔用容器所需的空間。