在更多列中向左浮动 CSS 技巧

Float Left in more columns CSS trick

本文关键字：CSS 技巧      更新时间：2023-09-26

我只是试图找到一些东西来解决我在CSS中的问题，但可能在jQuery中。乍一看很简单，但奇怪的是我无法解决这个问题。有人可以给我一个提示吗？

我在 JS 中有一个数组： 

var blocks = ["block1", "block2", "block3", "block4", "block5", "block6", "block7", "block8", "block9", "block10", "block11", "block12", "block13", "block14", "block15"];

我将以这种方式解析它：

for (var i = 0; i < blocks.length; i++) {
    var one_block = $("<div class='one_block'>" + blocks[i] + "</div>");
        $("all_blocks").append(one_block);
} 
<style>
 .one_block{
  width:20%;
  float:left;
 }
</style>

现在我的屏幕上有这个结果

这样你明白这都是div

这是 HTML：

block1   block2   block3   block4   block5
block6   block7   block8   block9   block10
block11   block12   block13   block14   block15

但我需要这个

block1   block4   block7   block10   block13
block2   block5   block8   block11   block14
block3   block6   block9   block12   block15

谢谢！

您可以将

"块"放入一列中，并使用模%将它们按顺序放入右列中。

这样的东西会起作用：

.CSS

 #column-1,#column-2,#column-3,#column-4,#column-5 {
  width:18%;
  float:left;
  border: 1px solid #333;
 }

.HTML

<div id="wrapper">
  <div id="column-1"></div>
  <div id="column-2"></div>
  <div id="column-3"></div>
  <div id="column-4"></div>
  <div id="column-5"></div>
</div>

JavaScript

var numberOfBlocks;
//get a number from the user to test how many blocks
while(isNaN(numberOfBlocks)) {
    numberOfBlocks = prompt('How many blocks do you want?')
}
//build the test array of blocks
var blocks = [];
for(var i = 1; i <= numberOfBlocks; i++) {
    blocks.push('block'+i)
 }

//determine the number of rows to use
rows = Math.ceil(blocks.length / 5);
//if the number of rows did not divide evenly, use modulus to find the number of columns that will need to be longer
numberOfLongColumns = (blocks.length % 5);
//keep track of the current column
column = 0;
//use an index, instead of i in the loop.  this allows us to reset the index if we encounter a column that has fewer elements
index = 0;
//loop over the array
for (var i = 0; i < blocks.length; i++) {
//if we've reached the end of a column...
    if(index % rows == 0) {
    //if it is the last of the longer columns...
    if(numberOfLongColumns > 0 && column == numberOfLongColumns) {
        //reset the index
      index = 0;
      //decrement the rows, so the next column is 1 element shorter
      rows--;
    }
    //move the pointer to the next column
    column++;
  }
  //increment the index
  index++;
  //add the element
  var one_block = $("<div>" + blocks[i] + "</div>");
  $("#column-"+column).append(one_block);
}

示例输出

块

1    块5    块9    块13    块16
块2    块6    块10 块14       块17
区块3    区块7    区块11    区块15    块18
区块4    区块8    区块12

您可以在此处看到它的工作：https://jsfiddle.net/igor_9000/386rwry5/2/

CSS3 columns可能会做到这一点。它的工作原理类似于报纸专栏的工作方式。最好的部分是，它将根据视口重新调整大小（类似于flex-box 。查看更多

.all_blocks {
  /* create 5 columns with 10% of view-port width */
  -webkit-columns: 10vw 5; 
  -moz-columns: 10vw 5;
  columns: 10vw 5;
}

查看演示

只需重新排列数组即可满足您的需求：

var blocks = ["block1", "block4", "block3", "block2", "block5", "block6", "block7", "block8", "block9", "block10", "block11", "block12", "block13", "block14", "block15"];

或者您想要的订单。

相关文章：