CSS float 无法正确定位 <div> [关闭]

Question

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

我该如何解决这个问题？

Answer 1

jsBin demo

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

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