动态宽度大小为浮动顶部的动态数量的div的Div [英] Div with dynamic width sized to dynamic number of divs that float top

问题描述

我有一个问题，试图强制CSS按照我想要的方式工作。下面你会发现一个2张图片和描述的行为应该是什么样的。所有的CSS和内容是动态创建的，所以任何形式的灵活性都是可行的，尽管如果可能的话应该避免使用。

I have an issue trying to force the CSS to work the way I want it to. Below you will find a 2 pictures and a description of what the behaviour should be like. All the CSS and content is dynamically created so any form of "flexibility" is doable, though if possible, should be avoided.

RED div具有动态宽度（width：auto），需要填充一堆黑色 div 。黑色divs的数量是随机的，或者取决于个案情况。

The RED div has dynamical width (width:auto) and needs to be filled with a bunch of BLACK divs. The number of black divs is random, or rather depends on a case-to-case basis.

Picture1和Picture2显示了如何在黑色divs占用更多空间然后一个高度（固定为720像素）的情况下扩展菜单。如果需要一个列，那么它再次应该向左扩展。

Picture1 and Picture2 show how the menu should expand in case the amount of black divs is taking more space then one height (which is fixed to 720px). In case a thrid column was to be needed, it once again should be expanded towards left.

我搜索过，发现这个CSS：

I've searched around and found this 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来确定列的数量，表会向右扩展，我需要扩展到左边，因为它是通过一些控件停靠在屏幕的右侧

• First one, the amount of columns needs to be fixed this way, and I need it to dynamically suit the content that fills it.
• Secondly, I do not think that this is meant to be done with dynamical width divs, mainly because gap and width have no meaning there.
• Lastly, even if I do use the javascript to determin the number of columns, the table expands to the right and I need it to expand to the left, because it is docked to the right side of the screen with some controls being there.

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
}

任何建议？

推荐答案

这是一些代码让你开始。我想这是你想要的行为。
我将max-height保持为120px，用于演示，您可以将其更改为720px。只需继续按加号框按钮添加内部div。

Here is some code to get you started. I guess this is the behavior you wanted. I have kept max-height to 120px for demo, you can change it to 720px. Just keep on pressing add box button to add inner divs.

$('#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" />

这篇关于动态宽度大小为浮动顶部的动态数量的div的Div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！