我有一个与此非常相似的问题。
我已经从https://material-ui.com/demos/cards/分叉出了 Material UI Card 示例。沙盒编辑器的链接在这里。
基本上，我需要在父 div 中的一行中水平堆叠 Material UI 卡，当它们不适合时，它们会在前一行下方创建另一行。
所以当我写：
render(
<div className="row">
<Demo /> <Demo />
</div>,
rootElement
);
我希望能同时拿到两张牌。
我添加了以下样式display: "inline-block"，但卡片仍然垂直堆叠：
const styles = {
card: {
minWidth: 275,
display: "inline-block"
}
};
需要进行一些更改
1) 首先父 div 也需要是内联块。这是为了确保 div 可以并排对齐
2) 将 white-space 设置为 nowrap 以确保元素不会换行到下一行。仅仅因为 div 是内联块并不意味着它们会并排对齐。如果内联 div 超过宽度，它将被换行到下一行。您需要通过设置空白参数来停止它
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句