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。将div的所有Card组件包装在以下显示屏上：flex。

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

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

1 个答案: