1

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

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

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

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

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

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

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

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

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

4

2 回答 2

0

是的，这只能通过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

于 2013-06-14T22:36:48.720 回答
0

它很容易用纯 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; }，以使包裹花车的容器不会塌陷。

于 2013-06-14T22:45:59.420 回答