javascript - 我想在 flexbox 中更改我的板块在 CSS 中的位置

Question

首先请允许我说我不打算使用 flexbox，所以如果必须使用不同的方法，我愿意接受。我正在制作一个 JavaScript 网站，该网站显示带有问题和答案的板块。问题的长度不同，答案的数量也不同 - 因此板的高度不同。

他们可能是，但我喜欢他们不是这样的样子。黑色图像显示了它当前的样子，白色显示了我希望它的样子。我希望能够完全能够自定义这些板的位置，使其始终保持固定距离5px。

此外，如果一个盘子很长，我希望有可能，例如 3 个小盘子可以放在任何一边，而不会改变它们的大小，而只是简单地排列成这种凌乱干净的外观。

想要的样子：

目前的样子：

（注意：变化是印版的位置，需要通过 Photoshop 制作）

请注意我已经尝试使用right left top，bottom但它们没有效果。

这是一个盘子的代码，但是每个盘子的大小会随着答案的数量而变化，我还取出了所有预定义和其他定义的变量。

<div className="Polls">
    <div className="Poll-1">
        text
    </div>
</div>

.Polls {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 5px;
  justify-content: center;
  background-color: black;
}

.Poll-1 {
  width: 210px;
  height: 190px;
  margin: 5px;
  border-style: solid;
  border-bottom-width: 1px;
  border-top-width: 1px;
  border-left-width:1px;
  border-right-width: 0.5px;
  border-radius: 10px;
  border-color: rgb(51, 51, 51);
}

标签： javascripthtmlcss

Answer 1

所以这是我尝试使用一些 js 对您的数据进行排序的尝试。

本质上，我在 flex-row 容器中创建了 4 个 flex-columns。

JS 本质上是在列之间对数据进行排序，而不是在一个元素中全部输出。它在列之间循环，直到没有更多数据输出。

这样 flex 列会适应下一个元素的高度，你会得到“凌乱干净”的外观......我猜。

// this to generate dummy poll data in an array of objects with various hights
var polls = [];
for(i=0;i<20;i++){ // generating 20 polls
 var randomHeight = Math.floor(Math.random()*50)+150; // setting them with random height property
	polls.push({text:'poll '+ (i+1),height:randomHeight})
}

// we loop through each element in the array of data, and assign it to different flex columns
// notice how each coloumn is named with a corresponding number
for(col=1,i=0; i<polls.length-1; i++) {
	var elm = $('<div class="poll"></div>'); // creating the generic element
  elm.text(polls[i].text); // injecting the content into the element
  elm.height( polls[i].height); // injecting height to illustrate different content size
	$('div#col'+col).append(elm); // eppending the element with it's content to the respective column
  col = col < 4 ? col+1 : 1;   // each time i check if I need to reset to the first column or move to the next one. 
  //You could also set a variable number of columns and generate them too.
}

.container{
 display:flex;
 flex-direction:row;
 flex-wrap:nowrap;
 justify-content: start;
 background:darkgrey;
}
.polls {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: start;
  align-items: stretch;
  margin:2px;
  padding:1px;
  background-color: grey;
  width:210px;
}

.poll {
  height: 190px;
  margin-bottom: 5px;
  border-style: solid;
  border-radius: 10px;
  border-color: rgb(51, 51, 51);
  color: white;
  border: 2px solid white;
  background:black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="polls" id="col1">
  </div>
  <div class="polls" id="col2">

  </div>
  <div class="polls" id="col3">

  </div>
  <div class="polls" id="col4">

  </div>

</div>