根據同一行中的其他浮動元素更改元素的寬度

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！