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將div中的所有Card組件包裹起來。

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