Html 如何使div（所有相同的div id）下拉到新行并垂直显示而不是水平显示

我对CSS很陌生，但我正在为我的网站设计这个登录页，我不知道如何使div的下降到一个新的行，当他们从页面的宽度推到一起。我使用了所有相同的div类名来简化样式设计，所以如果我能保留这些，那就太棒了。非常感谢您的帮助

要在浏览器窗口太小而无法内联时将div推到新行，只需浮动div即可。下面是一个简单的例子：

HTML:

---

问题不清楚。但希望这能对你有所帮助：你的标题说他们都有相同的id，你的声明说他们都有相同的类名。是哪一个？当然，如果你根本不提供任何标记也没关系，我们将完全关闭它。谢谢你的输入，但我已经尝试过了。我认为这是一个预定义的显示位置的东西divs@AzonYankee如果您不介意发布到目前为止的内容，我们可以尝试帮助您找到具体的问题：这不是一个答案，而是对一个没有提供代码的离题问题的胡乱猜测。不要回答离题的问题。投票关闭它们。有没有办法上传我的css/html文件的项目？

<div class="red box"></div>
<div class="blue box"></div>
<div class="green box"></div>

.box {
  width: 300px;
  height: 150px;
  float: left;
}

.red {
  background: #f00;
}

.blue {
  background: #0f0;
}

.green {
  background: #00f;
}