Question

我目前正致力于基于Material Design的网站主题。基本布局是包含所有卡片的包装div 使用（在桌面模式下）卡片会自动获取所需的最大宽度（也就是宽度：自动;）所有卡都有一个浮动：左;

我正在尝试制作一小段Javascript，只在斧头屏幕宽度上执行，这将最大化卡片的大小，这样它们就不会在行的右侧留下间隙。

< / p>

当前代码实际上与它们所用的元素有关：
卡片的CSS（所有带有'card'类的div元素）：

.card {
  display: inline-block;
  position: relative;
  min-width: 300px;
  max-width:calc(50% - 50px); /* Stops cards from taking more then 50% of the screen */
  min-height:300px;
  border-radius: 2px;
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0,     0.19);
  float:left;
  margin:5px;
  padding:10px 20px;
  z-index: 1;
}

由于一切都应该是动态的并且适用于所有类型的监视器和方向，因此无法隔离父div中的div以帮助调整大小。我一直在考虑（但不知道如何编写它）将使用Y坐标（或JQuery的.offset（）。top）并在同一个X位置找到div然后根据它给它们一个宽度一个x坐标的div数。

（测试版）网站在线here

我希望能比我更了解JQuery和JS的人可以帮助我。在此先感谢！
一个JS N00B

Answer 1

嗯，有兴趣的人，我发现如果你没有计划在向后兼容性方面走得太远，那对于这个问题的JS是完全无用的。

感谢@charlietfl指向我整个CSS3 flex的事情，这解决了几乎所有的麻烦，并完全按照我的需要做了。谢谢charlietfl！

根据同一行中的其他浮动元素更改元素的宽度

1 个答案: