MUI 网格布局，左侧为信息，右侧为图像

Question

鉴于以下 React MUI V5 示例代码，我正在设置一个个人资料页面，其中页面左侧有一个人的详细信息，该详细信息用页面左侧的标签/值表示。

我不确定该怎么做，是将“IMAGE”条目（请假设这是尺寸（宽度：300px，高度：300px）的个人资料图像放在值的右侧，即标签/值的旁边行，但不是最右边，只是很好地定位在信息的右侧。

同时，我不希望左侧的任何行信息有任何间隙，以便容纳图像，就在右侧。

任何指导都会很棒。

import * as React from 'react';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Grid';

const Item = styled(Paper)(({ theme }) => ({
  backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
  ...theme.typography.body2,
  padding: theme.spacing(1),
  textAlign: 'center',
  color: theme.palette.text.secondary,
}));

export default function NestedGrid() {
  return (
    <Box sx={{ flexGrow: 1 }}>
      <Grid container spacing={1}>
        <Grid item xs={2}>
          <Box>Username:</Box>
        </Grid>
        <Grid item xs={6}>
          <Box>Qwerty</Box>
        </Grid>
        <Grid item xs={4}></Grid>

        {/* First Name */}
        <Grid item xs={2}>
          <Box>First Name:</Box>
        </Grid>
        <Grid item xs={6}>
          <Box>Bob</Box>
        </Grid>
        <Grid item xs={4}></Grid>

        {/* Surname */}
        <Grid item xs={2}>
          <Box>Surname:</Box>
        </Grid>
        <Grid item xs={6}>
          <Box>Hope</Box>
        </Grid>
        <Grid item xs={4}></Grid>

        {/* DOB */}
        <Grid item xs={2}>
          <Box>DOB:</Box>
        </Grid>
        <Grid item xs={6}>
          <Box>01/01/2022</Box>
        </Grid>
        <Grid item xs={4}></Grid>

        {/* Occupation */}
        <Grid item xs={2}>
          <Box>Occupation:</Box>
        </Grid>
        <Grid item xs={6}>
          <Box>IT</Box>
        </Grid>
        <Grid item xs={4}></Grid>

        {/* Status */}
        <Grid item xs={2}>
          <Box>Status:</Box>
        </Grid>
        <Grid item xs={6}>
          <Box>Married</Box>
        </Grid>
        <Grid item xs={4}></Grid>

        {/* Image */}
        <Grid item xs={2}></Grid>
        <Grid
          item
          xs={6}
          style={{ display: 'inline-flex', alignItems: 'center' }}
        >
          <Box>IMAGE</Box>
        </Grid>
        <Grid item xs={4}></Grid>
      </Grid>
    </Box>
  );
}

Answer 1

您可以尝试以下代码来实现此目的：

export default function NestedGrid() {
  return (
    <Box sx={{ flexGrow: 1 }}>
      <Grid container spacing={1}>
        <Grid item xs={12} sm={6}>
          <Item>Username: Qwerty</Item>
        </Grid>
        <Grid item xs={12} sm={6}>
          <Item style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>IMAGE</Item>
        </Grid>

        {/* First Name */}
        <Grid item xs={12} sm={6}>
          <Item>First Name: Bob</Item>
        </Grid>

        {/* Surname */}
        <Grid item xs={12} sm={6}>
          <Item>Surname: Hope</Item>
        </Grid>

        {/* DOB */}
        <Grid item xs={12} sm={6}>
          <Item>DOB: 01/01/2022</Item>
        </Grid>

        {/* Occupation */}
        <Grid item xs={12} sm={6}>
          <Item>Occupation: IT</Item>
        </Grid>

        {/* Status */}
        <Grid item xs={12} sm={6}>
          <Item>Status: Married</Item>
        </Grid>
      </Grid>
    </Box>
  );

如果这不能完美工作，那么您可以根据您的要求进行调整。

希望它对你有用！！

Answer 2

import Box from "@mui/material/Box";
import Grid from "@mui/material/Grid";
import Logo from "../logo.svg";

export default function NestedGrid() {
  return (
    <Box display="flex">
      <Box>
        <Grid container spacing={1}>
          <Grid item xs={2}>
            <Box>Username:</Box>
          </Grid>
          <Grid item xs={6}>
            <Box>Qwerty</Box>
          </Grid>
          <Grid item xs={4}></Grid>

          {/* First Name */}
          <Grid item xs={2}>
            <Box>First Name:</Box>
          </Grid>
          <Grid item xs={6}>
            <Box>Bob</Box>
          </Grid>
          <Grid item xs={4}></Grid>

          {/* Surname */}
          <Grid item xs={2}>
            <Box>Surname:</Box>
          </Grid>
          <Grid item xs={6}>
            <Box>Hope</Box>
          </Grid>
          <Grid item xs={4}></Grid>

          {/* DOB */}
          <Grid item xs={2}>
            <Box>DOB:</Box>
          </Grid>
          <Grid item xs={6}>
            <Box>01/01/2022</Box>
          </Grid>
          <Grid item xs={4}></Grid>

          {/* Occupation */}
          <Grid item xs={2}>
            <Box>Occupation:</Box>
          </Grid>
          <Grid item xs={6}>
            <Box>IT</Box>
          </Grid>
          <Grid item xs={4}></Grid>

          {/* Status */}
          <Grid item xs={2}>
            <Box>Status:</Box>
          </Grid>
          <Grid item xs={6}>
            <Box>Married</Box>
          </Grid>
          <Grid item xs={4}></Grid>

          {/* Image */}
          <Grid item xs={2}></Grid>
          <Grid
            item
            xs={6}
            style={{ display: "inline-flex", alignItems: "center" }}
          ></Grid>
          <Grid item xs={4}></Grid>
        </Grid>
      </Box>
      <Box component="img" src={Logo} width={300} height={300} />
    </Box>
  );
}

用另一个 Box 包裹整个 Box 并使用弹性布局系统。左侧是信息，右侧是图像。 上面的代码可以正常工作。 希望你喜欢。