html - 如何阻止 div 换行？

Question

我用 CSS 定义了一个 div:

height: 100%;
width: 360px;
float: left.

现在，我有一个按钮可以动态地将这些 div 添加到正文中。问题是当浏览器窗口放不下时，它们会像这样将下一个 div 放在其他 div 的下方。

|bar|  |bar|  |bar|
|bar|  |bar|
|<---- Page width ---->|

现在，我想要的是让它像这样继续向右移动:

|bar|  |bar|  |bar|  |bar|  |bar|
|<---- Page width ---->|

当然，还会有一个滚动条。如果不定义 this 是否可行？

body {
    width: XXXpx;
}

Answer 1

除了使用 float: left，您还可以使用 display: inline-block 并使用 white-space: nowrap 包裹在容器中.

.floater {
  height: 100%;
  width: 360px;
  display: inline-block;
  border: 1px solid black;
}

.container {
  white-space: nowrap;
}

<div class="container">
  <div class="floater">Floating</div>
  <div class="floater">Floating</div>
  <div class="floater">Floating</div>
  <div class="floater">Floating</div>
  <div class="floater">Floating</div>
</div>