Javascript 基于同一行中的其他浮动图元更改图元的宽度

我目前正在做一个基于材料设计的网站主题。基本布局将是包含所有卡的包装器div。
使用（桌面模式）时，卡会自动获取所需的最大宽度（又名，宽度：auto；）。
所有卡片都有一个浮动：左

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

与它们所代表的元素相关的当前代码：
卡片的CSS（类为“card”的所有div元素）：

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

（测试版）网站在线

---

我希望比我更了解JQuery和JS的人能在这方面帮助我。提前谢谢
一个JS N00B

好吧，任何感兴趣的人，我发现如果你不打算在向后兼容方面走得太远的话，这个JS就完全没有用了。

---

感谢@charlietfl为我指出了整个CSS3

flex

的事情，这几乎解决了所有的问题，并且完全满足了我的需要。谢谢你，查理

好吧，任何感兴趣的人，我发现如果你不打算在向后兼容方面走得更远，那么这个JS就完全没有用了。

---

感谢@charlietfl为我指出了整个CSS3

flex

的事情，这几乎解决了所有的问题，并且完全满足了我的需要。谢谢你，查理

真的不清楚你想要什么在不同的大小，但css媒体查询应该做你想要的。另外，

flex

还有一个

justify

属性，具体取决于您的浏览器支持want@charlietfl例如：屏幕宽度为100。一行有4个div，大小分别为10、25、35和15（总共85个），剩下的15个什么都不是，我不想要。因此，JS或CSS（如果可能的话）应该将4个div设为X宽，这样它们总共100个。问题是，我需要一个通用的解决方案，该解决方案将涵盖相同的内容，如一排无休止的两次跳水，而不会浮到下一行。真的不清楚各种尺寸下您想要什么，但css媒体查询应该满足您的需要。另外，

flex

还有一个

justify

属性，具体取决于您的浏览器支持want@charlietfl例如：屏幕宽度为100。一行有4个div，大小分别为10、25、35和15（总共85个），剩下的15个什么都不是，我不想要。因此，JS或CSS（如果可能的话）应该将4个div设为X宽，这样它们总共100个。问题是，我需要一个通用的解决方案，该解决方案将涵盖相同的事情，如一排无休止的两次跳水，而不让它们漂浮到下一排。

.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;
}