收縮包裝的假期，因爲我添加更多的文字變成孩子DIV元素

HTML代碼：收縮包裝的假期，因爲我添加更多的文字變成孩子DIV元素

<div id="container"> 
    <div id="first"> 
     foo bar baz foo bar baz 
     foo bar baz foo bar baz 
    </div> 
    <div id="second"> 
     Foo 
    </div> 
    <div id="third"> 
     foo bar baz foo bar baz 
     foo bar baz foo bar baz 
    </div> 
</div>

CSS代碼：

body { 
    text-align: center; 
} 
#container { 
    display: inline-block; 
    background: lightcyan; 
} 
#first { 
    display: inline-block; 
    background: lightgreen; 
} 
#second { 
    background: orange; 
} 
#third { 
    width: 30%; 
    display: inline-block; 
    background: lightblue; 
}

我想確保整個DIV＃集裝箱收縮包裝圍繞div＃第一。上面的代碼按預期工作。看到這個演示：http://jsfiddle.net/HhrE6/

但是，當我添加更多的文本到div＃第三，收縮包裝打破。看破碎的演示：http://jsfiddle.net/n4Kn2/

爲什麼會發生這種情況？
我該如何防止這種情況發生？

來源

2013-07-07 Lone Learner

你有使用'inline-block'的原因嗎？既然你擁有所有的div，爲什麼不使用'block'呢？ – LinkinTED

@LinkinTED我爲div＃容器使用'inline-block'來首先縮小div＃的範圍。如果我爲所有div使用'block'，它們將擴展到覆蓋瀏覽器的整個寬度。 –

在此示例中，容器的寬度取決於內容的寬度，而容器的寬度又取決於容器的寬度。這就是渲染器在計算#container的寬度時無法考慮#third塊的實際寬度的原因。

根據CSS規範，the width of an inline block被計算爲

分鐘（最大（優選最小寬度，可用寬度），優選的寬度）。

其中優選的寬度由格式化內容計算

而不比其中顯式換行符發生

其他斷裂線於是容器的寬度成爲寬度#third塊（作爲最寬的塊），如果其內容佈局沒有任何換行符，然後設置#third塊的實際寬度到這個寬度的30％。

來源

2013-07-07 14:24:24

收縮包裝的假期，因爲我添加更多的文字變成孩子DIV元素

回答

相關問題