Div的动态宽度大小为浮动顶部的动态div数

Question

我试图强制CSS以我想要的方式工作时遇到问题。您将在下面找到2张图片以及行为应该是什么样的描述。所有的CSS和内容都是动态创建的，因此任何形式的灵活性和＃34;是可行的，但应尽可能避免。

RED div具有动态宽度（宽度：自动），需要填充一堆 BLACK div。黑色div的数量是随机的，或者更确切地说取决于具体情况。

Picture1和Picture2显示菜单应如何扩展，以防黑色div的数量占用更多空间，然后是一个高度（固定为720px）。如果需要第三列，则应再次向左扩展。

我已经四处搜索并发现了这个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

以下是一些可以帮助您入门的代码。我猜这是你想要的行为。 我为演示保持最大高度为120px，你可以将它改为720px。只需按下添加框按钮即可添加内部div。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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" />

＆＃13;

＆＃13;

＆＃13;

Answer 2

.red {
  border:solid 2px red;
  text-align:center;
  float:right;
   }
.black {
  border:solid 2px #000;
  display:inline-block;
  width:200px;
  margin:4px;
  height:40px;
  }
span .black:nth-child(1) {
   width:0;
  opacity:0;
  transition:0.3s;
  }
span:hover .black:nth-child(1) {
  width:200px;
  opacity:1;
}

<div class="red">
<span>
  <div class="black"></div>
  <div class="black"></div>
</span>
</div>

也许这可以帮助你开始