在对浮动元素进行包装后尽量减少行数，同时也尽量减少宽度

minimize rows after wrapping floated elements, but also minimize width

本文关键字：包装 元素      更新时间：2023-09-26

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

因此，在换行之前，所有内容看起来像这样:

<>之前=======================| XXXX XXXX XXXX XXXX XXXX |=======================之前

换行后，它看起来像这样:

<>之前================| XXXX XXXX xx || XXXXXX |================之前

然而，我真正想要的是最小化浪费的空间。如果它必须使用两行，我想让它包装更多的元素，使它们更适合，像这样:

<>之前=============| XXXX XXXX || xx XXXXXX |=============之前

1)这可能仅仅用CSS来完成吗?

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

使用纯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; }，使容器包装浮动不会崩溃。

是，这可以只使用CSS 。
使用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行上换行时，您强制使用将使其完美地适合2行。

希望这对你有帮助。

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

相关文章：