Question

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

所以，在包装之前，所有内容都是这样的：

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

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

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

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

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

1）这可能只用CSS吗？

2）如果没有，有没有人用JavaScript解决过这个问题？

Answer 1

是，这可以通过仅限CSS 来完成使用媒体查询，您可以在浏览器介于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很容易实现。

使用媒体查询来换行仅在窗口足够小时应用的样式。
将clear: left;应用于第三个元素。这将把它放到下一行，耶！

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

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

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

PS你可能也想做.container:after { clear: both; }，这样包装花车的容器就不会崩溃。

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

2 个答案: