自动调整大小功能

Question

所以我有一个栏，其中包含许多较小的 div，每个都有相同的 class。

.outer-bar{
  width: 100%;
  height: 50px;
  background-color: blue;
}

.outer-bar button {
  width: 50px;
  height: 40px;
  outline: none;
  background-color: white;
  border: none;
  margin-top: 5px;
  margin-bottom: 5px;
  float: left;
  margin-left: 2px;
}

<div class = "outer-bar">
  <button class = "a">Hi</button>
  <button class = "a">Hi</button>
  <button class = "a">Hi</button>
  <button class = "a">Hi</button>
  <button class = "a">Hi</button>
  <button class = "a">Hi</button>
  <button class = "a">Hi</button>
  <button class = "a">Hi</button>
  <button class = "a">Hi</button>
</div>

当 window 调整大小时，我希望 window 只显示足够多的它们，不会溢出，但尽可能多。

所以使用：window.addEventListener("resize", function() {} );，有什么方法可以实现吗？

我看到的一个很好的例子是 Google Docs，他们的栏会自动调整。

我更愿意使用 Javascript 和 CSS 来执行此操作，而不使用 Jquery 或外部库。（请注意，出于说明目的，我简化了元素的宽度和数量，但基本思想仍然相同）。我也更喜欢使用 for 循环和 document.getElementsByClassName("a").

我已经开始使用了：

var ribbon = document.getElementsByClassName("outer-bar")[0];
var prevChild = 0;
for(var i = 0; i < ribbon.children.length; i++) {
    if(ribbon.children[i].getBoundingClientRect().right < prevChild) {
        for(var c = i; c < ribbon.children.length; c++) {
            ribbon.children[c].style.display = "none";
        }
        break;
    }
    prevChild = ribbon.children[i].getBoundingClientRect().right;
}

尽管在我将 window 调整得更大后，该方法并不能使子项显示。

Answer 1

我不确定我是否理解正确，但看起来您需要在屏幕调整大小时对内部 div 进行不同的样式设置。 CSS 能够为您处理这个，根本不需要使用 JavaScript。

Media Queries 允许您根据 window.

的当前大小指定不同的样式

.outer-bar button {
  width: 50px;
  height: 40px;
  outline: none;
  background-color: white;
  border: none;
  margin-top: 5px;
  margin-bottom: 5px;
  float: left;
  margin-left: 2px;
}

@media screen and (max-width: 600px) {
  .outer-bar button {
    /* 
    Specify here any different styling 
    Ex. 
    */

    width: 25px;
   }
}

Answer 2

如果您知道丝带长度，为什么不将它除以您想要的按钮尺寸。然后循环制作第一个按钮（功能区length/size）块和其余的none。

自动调整大小功能

Automatic Resizing Function

html

javascript

css

resize