还有另一个“为什么我的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)

（但不能两者都选）。