React-Toolbox：尝试将卡片水平对齐答案

【问题标题】：React-Toolbox: Trying to align the Cards next to each other horizontallyReact-Toolbox：尝试将卡片水平对齐
【发布时间】：2019-07-16 19:30:50
【问题描述】：

我正在使用 React-Toolbox，在这种情况下，我怎样才能让这些 Card 元素水平对齐，彼此相邻。我试过 display: inline-block 并将它们分成三张单独的卡片，这是我最终想要的，但它并没有将它们一个挨一个对齐。

import { Card, CardText } from "react-toolbox/lib/card";

const ThemedCard = ({
  className,
  bodyTitle,
  bodyText = "",
  pageColor,
  actions = {}
}) => {
  return (
    <div>
      <TextBlock
        style={{
          padding: "1rem 0 3rem",
          fontSize: "3.5rem"
        }}
        component={Text}
      >
        {bodyText}
      </TextBlock>
      <h2>{bodyText}</h2>
      <Card
        {...{ className }}
        style={{ width: "350px", display: "inline-block" }}
      >
        <CardText>
          {bodyTitle ? <Title>{bodyTitle}</Title> : null}

          {objectToArray(actions).map(action => {
            return (
              <div>
                <ButtonLink {...action} to={urlResolver(action.to)} />
                <br />
                <br />
              </div>
            );
          })}
        </CardText>
      </Card>
      <Card
        {...{ className }}
        style={{ width: "350px", display: "inline-block" }}
      >
        <CardText>
          {bodyTitle ? <Title>{bodyTitle}</Title> : null}

          {objectToArray(actions).map(action => {
            return (
              <div>
                <ButtonLink {...action} to={urlResolver(action.to)} />
                <br />
                <br />
              </div>
            );
          })}
        </CardText>
      </Card>
      <Card
        {...{ className }}
        style={{ width: "350px", display: "inline-block" }}
      >
        <CardText>
          {bodyTitle ? <Title>{bodyTitle}</Title> : null}

          {objectToArray(actions).map(action => {
            return (
              <div>
                <ButtonLink {...action} to={urlResolver(action.to)} />
                <br />
                <br />
              </div>
            );
          })}
        </CardText>
      </Card>
    </div>
  );
};

【问题讨论】：

标签： css reactjs react-toolbox

【解决方案1】：

你可以尝试使用 display: flex。用 display: flex 将所有 Card 组件包裹在 div 中。

<div style={{display: flex}}>
  <Card
    {...{ className }}
    style={{ width: "350px" }}
  >
    <CardText>
      {bodyTitle ? <Title>{bodyTitle}</Title> : null}

      {objectToArray(actions).map(action => {
        return (
          <div>
            <ButtonLink {...action} to={urlResolver(action.to)} />
            <br />
            <br />
          </div>
        );
      })}
    </CardText>
  </Card>
  <Card
    {...{ className }}
    style={{ width: "350px" }}
  >
    <CardText>
      {bodyTitle ? <Title>{bodyTitle}</Title> : null}

      {objectToArray(actions).map(action => {
        return (
          <div>
            <ButtonLink {...action} to={urlResolver(action.to)} />
            <br />
            <br />
          </div>
        );
      })}
    </CardText>
  </Card>
 </div>

【讨论】：

Janiis，我以为我早先尝试过但没有奏效，我再次查看了您的解决方案并意识到我实施错误。谢谢。