CSS float不能正确定位<div>

Question

我遇到了CSS问题。我有<div>个元素，里面有两个<div>个。其中一个具有样式float:left，另一个具有float:right。它们的宽度设置为50％，一切都很好，它们完全按照应有的方式对齐。问题是当我设置@media min-width：500px时，我希望它们在<div> s下正常运行，并在另一个下面显示一个。这种情况发生了，但是第二个div没有按照它应该向左对齐，而是保持向右，并且只是低于第一个div。

我该如何解决这个问题？

Answer 1

<强> jsBin demo

将@media设置宽度设置为100% （或auto）。
如果您愿意，作为 plus ，您还可以重置 浮动到none

@media (max-width: 768px)  {
     .left, .right{
           float:none;
           width:100%; /* or `auto` */
      }
}