包装浮动元素后最小化行，但也最小化宽度

Question

我有一个“工具栏”，它有任意数量的浮动内联块元素，任意宽度未知。随着浏览器窗口变窄，在某些时候这些浮动元素会折叠起来。这很好，但我真正想要的是在发生这种情况时最小化宽度和高度。

所以，在包装之前，一切看起来像这样：

======================== | XXXX XXXX XX XXXXXX | ========================

包装后是这样的：

================= | XXXX XXXX XX | | XXXXXX | =================

但是，我真正想要的是尽量减少浪费的空间。如果它必须使用 2 行，我希望它包装更多元素，以便它们更适合，如下所示：

============== | XXXX XXXX | | XXXXXXXX | ==============

1) 这可能只用 CSS 来完成吗？

2) 如果没有，有没有人已经用 JavaScript 解决了这个问题？

Answer 1

是的，这可以通过CSS only来完成。
使用 Medias Queries，当浏览器大小介于 X 和 X 之间时，您可以制作 X 尺寸的包装器。

例如：

#toolbar {
  position: relative;  
  width: 100%;
}

#toolbar .wrapper {
  width: 100%;
  margin: 0 auto;
}

@media screen and (min-width: 200px) and (max-width: 640px) {
  #container {
    width: 600px;
  }
}

这样，margin: 0 auto; 工具栏的内容始终保持居中，当它应该在 2 行上换行时，你强制 with 使其在 2 行中完美契合。

希望这个帮助。

欲了解更多信息：
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries?redirectlocale=en-US&redirectslug=CSS%2FMedia_queries

Answer 2

用纯 CSS 很容易实现。

1. 使用媒体查询包装样式，这些样式仅在窗口足够小时才应用。
2. 将clear: left; 应用于第三个元素。这会将其放到下一行，耶！

@media (max-width: 400px) {
  #third-element {
    clear: left; }}

演示：http://jsbin.com/ihusom/1/edit

容器仍然是页面范围的。要使容器占用尽可能小的宽度，请对其应用display: inline-block;。

PS 你可能还想做.container:after { clear: both; }，这样包裹花车的容器就不会塌陷。