Div向下移動而不是隱藏

因此，我有一個容器溢出的兩個潛水：隱藏。Div向下移動而不是隱藏

但是，當我增加第一個div的寬度時，第二個向下移動而不是在右側切割。以下是fiddle.

將第一個div的寬度增加到500px以查看它發生的情況。

<div id="container"> 
<div id="first">FIRST</div> 
<div id="second">SECOND</div> 
</div>

來源

2015-12-17 mrf1freak

由於容器寬度爲500像素和第二個div沒有足夠的空間，以適應在一行 – Morpheus

睡眠，他試圖問題解決的是他認爲溢出：隱藏應該截斷它。他明白，它不適合這樣的寬度。 –

這是'inline-block'的預期行爲，如果它沒有空間包含第二個元素。唯一的選擇是'white-space：nowrap'或將這兩個div放在足夠寬的div中以適合它們（即將一個寬度爲9999px的div包裹在它們周圍）。 – gaynorvader

您可以在容器上使用white-space: nowrap：https://jsfiddle.net/1631rrpn/3/

#container { 
    width: 500px; 
    height: 150px; 
    border: 1px solid #ccc; 
    overflow: hidden; 
    white-space: nowrap; 
} 
#first { 
    width: 500px; 
    height: 100px; 
    background: #666; 
    display: inline-block; 
} 

#second { 
    width: 100px; 
    height: 100px; 
    background: #ccc; 
    display: inline-block; 
}

來源

2015-12-17 16:52:35

Div向下移動而不是隱藏

回答

相關問題