如何在父元素（div）内的行中水平堆叠元素（卡片）

Question

我有一个非常相似的问题to this one。

我从https://material-ui.com/demos/cards/分叉了Material UI Card示例。链接to the sandbox editor is here。

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

所以当我写：

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

我希望两张卡能彼此分开。

我用display: "inline-block"添加了以下样式，但卡片仍然垂直堆叠：

const styles = {
  card: {
    minWidth: 275,
    display: "inline-block"
  }
};

Answer 1

需要更改的夫妇

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

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

https://codesandbox.io/s/9y51rxjmxy

Answer 2

如何添加：

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

问题是，将其内容包装在div中，默认情况下为display：block; -那就是为什么显示：内联块在Demo组件上不起作用的原因。