還有另一個“為什么我的div不會浮動”（在jquery-mobile中）？

Question

我正在嘗試使一些html代碼成為移動優先，因此我使用@media來測試“桌面”寬度（此刻在我的Sass中任意設置為45em）。 所討論的兩個div（ #picture-block和#question-block ）的想法是：

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

盡管在代碼檢查器中單擊，但在殺死兩個width屬性（50％和100％）時，我只能使有問題的兩個div並排浮動。 我對此感到困惑，因為我認為display: block將是默認值，並且我不明白為什么width屬性會影響float 。 我正在使用jquery-mobile框架，但是我看不到它將如何干擾代碼檢查器。

我創建了一個Codepen鏈接來嘗試復制該問題。 我的問題：對於桌面寬度，我需要對CSS進行什么操作才能使picture-block和question-block div彼此浮動？

Answer 1

在Codepen中，塊周圍也有1px的邊框。 這將導致每個像素的總寬度為50％加上2個像素。 因此，其中兩個不能並排放置在100％的容器中！

可能的解決方案：

• 要么給他們box-sizing:border-box在寬度中包括邊框寬度
• 或者，將寬度設置為calc(50% - 2px)

（但不能兩者都選）。