如何在父元素（div）内水平堆叠元素（卡片）答案

【问题标题】：How to stack elements (cards) horizontally in a row within a parent element (div)如何在父元素（div）内水平堆叠元素（卡片）
【发布时间】：2018-08-10 09:16:07
【问题描述】：

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

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

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

所以当我写的时候：

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

我希望将两张卡放在一起。

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

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

【问题讨论】：

因为您应该在作为卡片codesandbox.io/s/82xn3oppr8 的父级的div 元素上使用该自定义样式，但也许更好的解决方案是使用Grid 组件。

标签： css reactjs material-ui

【解决方案1】：

需要进行一些更改

1) 首先，父 div 也需要是 inline-block。这是为了确保 div 可以并排对齐

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

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

【讨论】：

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

【解决方案2】：

如何添加：

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

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

【讨论】：