又一個「爲什麼我的div不會浮動」（在jquery-mobile中）？

我試圖做一些HTML代碼移動優先，所以我堅持@media測試「桌面」寬度（任意設置爲45em在我的sass此刻）。有問題的兩個div（#picture-block和#question-block）的理念是：又一個「爲什麼我的div不會浮動」（在jquery-mobile中）？

$desktopwidth: 45em 
#question-block, #picture-block 
    width: 100% 
@media (min-width: $desktopwidth) 
    #question-block, #picture-block 
    width: 50% 
    float: left

儘管點擊我的代碼檢查的時候，我只能讓我的兩個div在提問邊側浮動左，當我殺兩個width屬性（50％和100％）。我很困惑，因爲我認爲display: block將是默認的，我不明白爲什麼width屬性會影響float。我正在使用jquery-mobile框架，但我看不出它會干擾代碼檢查器。我創建了codepen link來嘗試複製問題。我的問題：我需要做什麼的CSS以獲得picture-block和question-block div浮動桌面寬度彼此相鄰？

來源

2015-11-01 Escher

（但不能同時使用。）對於閱讀此內容的任何人：不要這樣做。使用彈性框（除非您必須支持傳統瀏覽器）。 – Escher

在codepen中，您還有一個圍繞塊的1px邊框。這導致每個的總寬度爲50％加上2個像素。所以它們中的兩個不會在100％容器中並排安裝！

可能的解決方案：

要麼給他們box-sizing:border-box包括寬度
邊框的寬度，或設置寬度爲calc(50% - 2px)

來源

2015-11-01 09:17:51

啊，就是這樣！（我在實際的代碼中沒有邊框，但是我確實有一些奇怪的填充線被搞砸了）。謝謝！ – Escher

又一個「爲什麼我的div不會浮動」（在jquery-mobile中）？

回答

相關問題