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

Question

我目前正在研究基于Material Design的网站主题。 基本布局是包含所有卡片的包装div。
使用（在桌面模式下）卡片可以自动获得所需的最大宽度（又名width：auto;）。
所有卡都具有浮点数：left;

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

当前代码实际上与它们用于什么元素有关：
卡的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数。

该（测试版）网站是网上点击这里

我希望了解JQuery和JS的人能对我有所帮助。 提前致谢！
JS N00B

Answer 1

好吧，任何有兴趣的人，我发现如果您不打算向后兼容，那么针对这一方面的JS完全没有用。

感谢@charlietfl向我指出了整个CSS3 flex问题，这解决了几乎所有的麻烦，并且确实满足了我的需要。 谢谢charlietfl！