Question

我正处于Material-UI的学习阶段，并且遇到一个问题，即我无法将网格内容浮动到右侧。

我在容器网格中尝试了alignItems="flex-start" justify="flex-end" direction="row"，但没有成功，还尝试了CSS float:right属性。

我回答了stackoverflow question的问题，但对我来说不起作用。

我的代码在下面，并且codesandbox link

import React from "react";
import ReactDOM from "react-dom";
import {
  ExpansionPanel,
  ExpansionPanelSummary,
  ExpansionPanelDetails,
  Typography,
  Grid
} from "@material-ui/core/";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";

function App() {
  return (
    <ExpansionPanel square defaultExpanded={true}>
      <ExpansionPanelSummary
        style={{ backgroundColor: "#009ACD", color: "white" }}
        expandIcon={<ExpandMoreIcon />}
        id="panel1a-header"
      >
        <Typography variant="h6">General Details</Typography>
      </ExpansionPanelSummary>
      <ExpansionPanelDetails>
        <Grid container>
          <Grid item sm={3}>
            Image Container
          </Grid>
          <Grid item sm={2}>
            <Typography variant="h6"> {"Prabhat Kumar"}</Typography>
            <Typography> Tester </Typography>
          </Grid>
          <Grid
            contaienr
            sm={7}
            alignItems="flex-end"
            justify="flex-end"
            direction="row"
          >
            <Grid item>
              <Typography variant="h6">
                      Need this content on the right side
              </Typography>
            </Grid>
          </Grid>
        </Grid>
      </ExpansionPanelDetails>
    </ExpansionPanel>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

我试过了您的沙箱，发现这里发生了一些事情：

contaienr应该在container

         <Grid
            contaienr // Fix
            sm={7}
            alignItems="flex-end" // remove
            justify="flex-end"
            direction="row" // Remove
          >

只需将其替换为：

<Grid container sm={7} justify="flex-end">

材质用户界面-遇到使网格对齐以向右浮动的问题

1 个答案: