Question

所以我的应用程序包含向左浮动的小方块（固定大小）。当列的宽度和间距与窗口大小匹配时，它看起来很棒。

 | [] [] [] [] |

如果没有，右侧有一个很大的空间。

 | [] [] [] []   |

我尝试使用CSS列修复此问题，这些列会从上到下显示您的内容。我想从左到右。

因此，我使用一些javascript模拟了从左到右的列行为，基本上从列的总宽度和容器的宽度之间的差异中获取剩余宽度。我认为我真正想要的是找到一种获得列数的优雅方法。

$(window).resize(function() {
    var totalGridWidth = $("#grid").width();
    var videoWidth = $(".square").width();

    var spaceRatio = (totalGridWidth-scrollbarWidth)/videoWidth;
    var currCols = parseInt((spaceRatio).toString().split(".")[0]);
    var colLeftOverSpace = parseFloat("0."+(spaceRatio).toString().split(".")[1]);
    var num = colLeftOverSpace * (videoWidth/currCols);

    $(".square").css("margin-right", num/2 +"px").css("margin-left", num/2 +"px");
});

DEMO：http://jsfiddle.net/ra3t2gub/（调整宽度）

有更优雅的方法吗？我有点尴尬。

Answer 1

查看flexbox！（当你读到这篇文章时，我会写一篇更深入的答案）

在等待时，这是一个非常简单的示例 - Codepen.io

ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

li {
  display: block;
  width: 200px;
  height: 200px;
  background: #CCC;
  margin: 5px;
}

有没有更聪明的方法来做这个CSS列JS更换？

1 个答案: