css - React-Toolbox:尝试水平对齐卡片

Question

我正在使用 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>
  );
};

Answer 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>