為什麼我的 50% 寬度內嵌區塊列會換行到下一行？

內聯塊元素換行：寬度問題

在創建每列寬度為50% 的兩列佈局時，許多人選擇對於顯示：內聯塊方法以避免浮動的潛在挑戰。然而，當兩列都使用 100% 寬度時，就會出現令人費解的情況。第二列似乎斷到了第二行。

根本原因

這種行為背後的罪魁禍首在於 HTML 透過 display: inline 對空白字元的考慮-阻塞。當空格字元分隔兩個 div 元素時，瀏覽器會將此空格解釋為附加寬度，從而導致第二列換行。

解

解決此問題，消除 div 元素之間的空白字元。這確保了它們的組合寬度的計算是準確的，而不增加額外的空間。調整後的 HTML 如下所示：

<div>

透過這個簡單的修改，兩列現在佔據 100% 寬度，並排在同一行上。

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