Question

我试图先移动一些html代码，因此我已经卡住了@media来测试＆＃34;桌面＆＃34;宽度（此刻我的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 link来尝试复制问题。我的问题：我需要对css做些什么才能让picture-block和question-block div在桌面宽度上相互浮动？

Answer 1

在codepen中，块周围也有1px边框。这导致每个的总宽度为50％加上2个像素。所以他们中的两个在100％的容器中不能并排！

可能的解决方案：

要么让box-sizing:border-box包含宽度
或，将宽度设置为calc(50% - 2px)

（但不是两者。）

又一个＆＃34;为什么我的divs浮动＆＃34; （在jquery-mobile中）？

1 个答案: