Css 如何在父元素（div）内水平地将元素（卡片）堆叠成一行

我有一个非常类似的问题

我已经从中派生了材质UI卡示例。链接

基本上，我需要将材质UI卡水平堆叠在父div中的一行中，当它们不适合时，它们会在上一行下方创建另一行

所以当我写的时候：

render(
    <div className="row">
      <Demo /> <Demo />
    </div>,
    rootElement
  );

如何添加：

const styles = {
  card: {
    minWidth: 275,
    float: "left",
    marginRight: 10 // or sth.
  }
};

---

问题是，将其内容包装在一个div中，默认情况下该div为display:block；-这就是为什么演示组件上的display:inline块在这里不起作用。

需要进行一些更改

1） 首先，父div也需要是内联块。这是为了确保div可以并排对齐

2） 将空白设置为nowrap以确保元素不会换行到下一行。仅仅因为div是内联块并不意味着它们将并排对齐。如果inline div超过了宽度，它将被换行到下一行。您需要通过设置空白参数来停止它

---

因为您应该在作为卡的父元素的

div

元素上使用自定义样式，但更好的解决方案可能是使用

Grid

组件。谢谢，但我在演示中仍然看到它们垂直对齐？您能重新加载我在上面粘贴的链接吗？它为meSo工作，我需要将卡包装在另一个div中？您的卡已经包装在一个div中，该div不是内联块。我没有添加任何新元素。您可以从卡本身删除内联块

const styles = {
  card: {
    minWidth: 275,
    float: "left",
    marginRight: 10 // or sth.
  }
};