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

Question

我对 CSS 很陌生，但我正在为我的网站设计这个登录页面，当它们从页面宽度推到一起时，我不知道如何使 div 下降到新行。我使用了所有相同的 div 类名来简化样式设置，所以如果我能保留它，那就太棒了。任何帮助是极大的赞赏！

标签： htmlcss

Answer 1

当浏览器窗口太小而无法内嵌时，要将 div 推送到新行，您只需浮动 div。这是一个简单的例子：

HTML：

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

CSS：

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

.red {
  background: #f00;
}

.blue {
  background: #0f0;
}

.green {
  background: #00f;
}

例子