javascript - 动态宽度的 Div 大小调整为 float 顶部的 div 的动态数量

Question

我在尝试强制 CSS 按我希望的方式工作时遇到了问题。您将在下面找到 2 张图片和对行为应该是什么样子的描述。所有 CSS 和内容都是动态创建的，因此任何形式的“灵 active ”都是可行的，但应尽可能避免。

RED div 具有动态宽度 (width:auto)，需要用一堆 BLACK div 填充。黑色 div 的数量是随机的，或者更确切地说取决于具体情况。

图片 1 和图片 2 显示了在黑色 div 占用的空间超过一个高度(固定为 720 像素)的情况下菜单应该如何扩展。如果需要第三列，则应再次向左展开。

我四处搜索并找到了这个 CSS:

#redDiv {
-moz-column-count: 2; 
-moz-column-gap: 50%;
-webkit-column-count: 2;
-webkit-column-gap: 50%;
column-count: 3;
column-gap: 50%;
}

但是这里存在三个问题:

• 第一个，列的数量需要以这种方式固定，我需要它动态适应填充它的内容。
• 其次，我不认为这意味着要用动态宽度 div 来完成，主要是因为 gap 和 width 在那里没有意义。
• 最后，即使我确实使用 javascript 来确定列数，表格也会向右扩展，我需要它向左扩展，因为它停靠在屏幕的右侧，并且有一些控件正在那里。

编辑:(js fiddle)已更新

HTML:

<div id="rightdocked">
  <div id="RedDiv">
    <div class="blackdivs"></div>
    <div class="blackdivs"></div>
    <div class="blackdivs"></div>
    <div class="blackdivs"></div>
    <div class="blackdivs"></div>
  </div>
</div>

CSS:

.blackdivs {
  position: relative;
  margin-top: 0px;
  margin-bottom: 20px;
  width: 300px;
  height: 40px;
  border: solid 2px black;
  background-color: white;
}

.blackdivs:first-of-type {
  background-color: green;
}

#RedDiv {
  max-height: 180px;
  width: auto;
  z-index: 9;
  background-color: lightgreen;
  position: relative;
  float: left;
  background-color: white;
  border: 2px red solid;
}

#rightdocked {
  position: relative;
  width: auto;
  height: 300px;
  float: right
}

有什么建议吗？

Answer 1

这里有一些代码可以帮助您入门。我想这就是你想要的行为。为了演示，我将 max-height 保持为 120px，您可以将其更改为 720px。只需继续按添加框按钮即可添加内部 div。

$('#addBoxButton').click(function() {
  $('.outer').append('<div class="inner">innner</div>');
});

.outer {
  border: 1px solid red;
  max-height: 120px;
  width: inherit;
  display: flex;
  flex-wrap: wrap-reverse;
  flex-direction: column;
}
.inner {
  border: 1px solid black;
  width: 50px;
  height: 20px;
  margin: 5px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class='outer'>
</div>
<input id="addBoxButton" type="button" value="add box" />