為什麼兩個 50% 寬度的內嵌區塊元素會換行到下一行？

兩個寬度為50% 的內聯區塊元素中斷到第二行

嘗試使用display:inline-block 建立兩列寬度相等的50% 時，觀察到，如果元素的總寬度超過99%，第二列就會換行到下一行。這種行為可能看起來違反直覺。

理解問題

這種行為的原因在於 display:inline-block 與 HTML 中的空白互動的方式。空白，例如換行符號、製表符和空格，會被 display:inline-block 折疊。這意味著，當內聯塊元素之間有空格時，它被視為單個空格，並且元素有效地彼此相鄰定位。

當內聯塊元素的總寬度超過 100 時%，沒有剩餘空間來容納空白。結果，第二列被迫換行到下一行。

解決方案：刪除空格

要解決此問題，需要刪除內聯塊元素之間的空格。這可以透過使用以下 HTML 程式碼來實現：

<div>

透過連接沒有任何空格的 div，display:inline-block 元素可以有效地並排放置，它們之間沒有任何空格。這可以確保它們在容器的寬度內正確換行。

透過此調整，兩個內聯區塊元素將保持 50% 的寬度，並且不會換行到第二行，即使它們的總寬度超過 100% .

以上是為什麼兩個 50% 寬度的內嵌區塊元素會換行到下一行？的詳細內容。更多資訊請關注PHP中文網其他相關文章！