Question

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

.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.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;
}

尽管一旦我将窗口调整为更大的大小，该方法就无法使子级显示。

Answer 1

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

Media Queries可让您根据窗口的当前大小指定不同的样式。

.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

如果您知道碳带长度，为什么不将其除以您希望按钮的尺寸。然后遍历按钮，使第一个（色带长度/大小）阻止，其余的都不阻止。

自动调整大小功能

2 个答案: