Javascript 在中间替换一行块而不是结束（CSS/JS/JQ）

一行内联块如何被收缩的父块包装成相等（或几乎相等）的行

因此，不要像这样包装：

像这样包装：

如果有不均匀数量的块，像这样：

---

您可以使用CSS网格

网格模板列

和@media（如果您想按屏幕宽度包装），或者在JS中使用

document.getElementById（'bottomblocks'）.style.gridTemplateColumns

变量来实现这一点。（如果我理解正确）

我在这里用JS写了一个例子：

你可以从我开始的地方了解它：

或者只是从

---

Moz://a有一个很好的例子

他是我刚刚写的有趣的东西。。。假设您想要一个“增强的换行”行为，它将换行一半的子对象，而不是正常的浮动

这与其说是一个强有力的最佳实践答案，不如说是一篇“文章”

---

这里有一个解决方案，在每行的末尾插入

元素。可以将此代码放入函数中，以便在需要包装块时运行

// Make sure that the last row of blocks doesn't have 2 less blocks than all
// the previous rows. Assume that all blocks are equal size.
var blocks = sharing.find('.btn');

//what's the parent width
var parentWidth = blocks.parent().width();

//how many blocks can fit in such a width
var maxNumOfBlocksInOneRow = Math.floor(parentWidth / blocks.outerWidth(true));

//repeatable code
var calcNumOfBlocksInLastRow = function(){
  var lastRowFull = blocks.length % maxNumOfBlocksInOneRow ? false : true;
  if (lastRowFull) {
    return maxNumOfBlocksInOneRow;
  } else {
    return blocks.length % maxNumOfBlocksInOneRow;
  }
}

//do we have more blocks than row's maximum?
if (blocks.length > maxNumOfBlocksInOneRow) {
  //how many blocks would the last row have
  var numOfBlocksInLastRow = calcNumOfBlocksInLastRow();

  //if the last row is missing more than 1 block, try with 1 less block in each row
  while (numOfBlocksInLastRow < maxNumOfBlocksInOneRow - 1) {
    maxNumOfBlocksInOneRow--;
    numOfBlocksInLastRow = calcNumOfBlocksInLastRow();
  }

  //insert <br> at the end of each row
  jQuery('<br>').insertAfter(blocks.filter(':nth-child(' + maxNumOfBlocksInOneRow + 'n)'));
}

//确保最后一行块的块数不少于全部块数的2个
//前几行。假设所有块的大小相同。
var blocks=sharing.find（'.btn'）；
//父宽度是多少
var parentWidth=blocks.parent（）.width（）；
//这样的宽度能容纳多少块
var maxNumOfBlocksInOneRow=数学地板（parentWidth/blocks.outerWidth（true））；
//可重复代码
var calcNumOfBlocksInLastRow=函数（）{
var lastRowFull=blocks.length%maxNumofBlocksIneRow？false:true；
如果（最后一行）{
返回maxNumOfBlocksInOneRow；
}否则{
返回blocks.length%MaxNumofBlocksIneRow；
}
}
//我们的街区比世界其他地区的最大街区多吗？
如果（blocks.length>MaxNumofBlocksIneRow）{
//最后一排有多少个街区
var numoblocksinlastrow=calcNumOfBlocksInLastRow（）；
//如果最后一行缺少1个以上的块，请尝试在每行中减少1个块
而（numOfBlocksInLastRow
jQuery（“
”）.insertAfter（blocks.filter（“：第n个子（“+maxnumoblocksinonerow+'n）”）；
}

是什么导致了您的包装？通过箭头，我假设您正在缩小屏幕的宽度以使元素包裹/堆叠？因此，本质上，您是在问如何在较小的屏幕上显示偶数列？@obsidiange收缩的父元素导致了对子元素的换行。我在问如何在每一行中有相同数量的块。但是如果总共有不均匀的块数，那么最后一行的块数比其他行的块数少1块，这太棒了！但是，它在用块填充2行后失败。如果要将其应用于多个

.container

，则第3行之后的行为将变得不稳定：）。。。你可能需要在它们之间循环。。。对于每个，循环通过

div

——我就是这样写的，没有太多的背景。这不是一个经过战场测试的解决方案。你必须适应它。非常感谢！但不幸的是，它不符合要求。另外，我想远离CSS网格atm

// Make sure that the last row of blocks doesn't have 2 less blocks than all
// the previous rows. Assume that all blocks are equal size.
var blocks = sharing.find('.btn');

//what's the parent width
var parentWidth = blocks.parent().width();

//how many blocks can fit in such a width
var maxNumOfBlocksInOneRow = Math.floor(parentWidth / blocks.outerWidth(true));

//repeatable code
var calcNumOfBlocksInLastRow = function(){
  var lastRowFull = blocks.length % maxNumOfBlocksInOneRow ? false : true;
  if (lastRowFull) {
    return maxNumOfBlocksInOneRow;
  } else {
    return blocks.length % maxNumOfBlocksInOneRow;
  }
}

//do we have more blocks than row's maximum?
if (blocks.length > maxNumOfBlocksInOneRow) {
  //how many blocks would the last row have
  var numOfBlocksInLastRow = calcNumOfBlocksInLastRow();

  //if the last row is missing more than 1 block, try with 1 less block in each row
  while (numOfBlocksInLastRow < maxNumOfBlocksInOneRow - 1) {
    maxNumOfBlocksInOneRow--;
    numOfBlocksInLastRow = calcNumOfBlocksInLastRow();
  }

  //insert <br> at the end of each row
  jQuery('<br>').insertAfter(blocks.filter(':nth-child(' + maxNumOfBlocksInOneRow + 'n)'));
}