html - float html 元素的奇怪行为

Question

我在我的元素中遇到了 float 元素的问题，在代码诊断后它减少了这个 fiddle :

https://jsfiddle.net/7re8j448/1/

#one, #two {
    display:inline-block;
    background: green;
}
#two {
    float:left;
}

@media screen and (max-width: 320px) {
    #one, #two {
        display: block;
        background: red;
        float: none;
    }
}

<div id="div">
    <span id="one">One</span>
    <span id="two">Two</span>
</div>

如果您将结果部分调整为小于 320px(bg 应该变为红色)，然后将其提升回绿色 bg，问题就来了。

float 元素“two”，在开始时位于“one”元素的左侧，调整大小后位于“one”下方。我猜这是因为我让它以 <320px 大小阻塞，而浏览器不理解，在调整大小后它应该首先返回字符串，然后才 float 。

我该如何解决？

感谢您的帮助，我对我的英语感到抱歉。

UPD:我不需要两个元素都 float 。只有“两个”。

UPD2:我很抱歉我的错误解释。让我们澄清一些要点。 在实际情况下，我有超过 2 个元素，这些元素很复杂，它们的位置取决于屏幕宽度。元素的顺序很重要，因为末尾的元素会变成 block 状并隐藏在显示的移动菜单中。

Answer 1

与其更改 #one 的 display 属性，不如将宽度设置为 100%。

#one,
#two {
  background: green;
}
#one {
  display: initial;
  display: inline-block;
}
#two {
  float: left;
}
@media screen and (max-width: 320px) {
  #one,
  #two {
    background: red;
  }
  #one {
    width: 100%;
  }
  #two {
    display: block;
    float: none;
  }
}

<div id="div"> <span id="one">One</span>
  <span id="two">Two</span>

</div>

JSfiddle Demo