javascript - 包装 float 元素后最小化行，同时最小化宽度

Question

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

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

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

包装后，它看起来像这样:

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

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

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

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

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

Answer 1

它很容易用纯 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; } 这样包裹浮子的容器就不会塌陷。