Javascript 如何自动水平放置多个div？

我正在写一个网上商店。因此，我有一张商品卡清单。我如何在页面上水平排列它们，以便不必手动调整它们？我需要以下结果：

现在我通过：

Название

price

重量

国家

ббббббббббзб

.卡片{ 位置：绝对位置； 左：150px； 顶部：200px； 盒影：0 4px 8px 0 rgba0,0,0,0.2； 最大宽度：300px； 保证金：自动； 文本对齐：居中； 字体系列：arial； } .价格{ 颜色：灰色； 字体大小：22px； } .卡片按钮{ 边界：无； 大纲：0； 填充：12px； 颜色：白色； 背景色：000； 文本对齐：居中； 光标：指针； 宽度：100%； 字号：18px； } .卡按钮：悬停{ 不透明度：0.7； }

---

它们太多了，我不得不把每一个都写下来。该项目使用HTML+CSS+JAVASCRIPT，没有框架或第三方库。

您可能希望在此处使用flexbox。使用display:flex设置卡的父容器的样式

---

有关更多详细信息，我建议添加display:flex；柔性包装：包装；对于卡的父元素，您将获得预期结果

f_集装箱{ 显示器：flex； 柔性包装：包装； } .卡片{ 位置：相对位置； 左：150px； 顶部：200px； 盒影：0 4px 8px 0 rgba0,0,0,0.2； 最大宽度：300px； 保证金：自动； 文本对齐：居中； 字体系列：arial； 利润率：20px； } .价格{ 颜色：灰色； 字体大小：22px； } .卡片按钮{ 边界：无； 大纲：0； 填充：12px； 颜色：白色； 背景色：000； 文本对齐：居中； 光标：指针； 宽度：100%； 字号：18px； } .卡按钮：悬停{ 不透明度：0.7； } Название

price

重量

国家

ббббббббббзб

Название

price

重量

国家

ббббббббббзб

Название

price

重量

国家

ббббббббббзб

Название

price

重量

国家

ббббббббббзб

Название

price

重量

国家

ббббббббббзб

Название

price

重量

国家

ббббббббббзб

Название

price

重量

国家

ббббббббббзб

Название

price

重量

国家

ббббббббббзб

使用“显示：网格”在网格中排列项目。用类容器将卡包装在div中

使用以下代码：

.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 40px;
}

您将能够在一个div中排列您的卡。您可以查看jsfiddle。我还删除了卡片的边距和位置样式，因为它们不需要，因为它们会干扰网格样式。阅读更多关于网格的信息

忘记位置：绝对，最重要的是，忘记浮动。Flexbox是我们的主和救世主。