css - 使用 Material-UI 将元素并排放置在卡片中

Question

我目前正致力于显示用户个人资料详细信息。我正在尝试使用下面列出的信息制作一张卡片。我希望这些元素并排放置，而不是在下图中分开放置。

我试过给每个元素一个网格元素，但它只是把它们都列在下面。我正在尝试让 skills 和 home phone 并排坐在同一排 with 也可以工作 cell phone 也可以并排放置

                        <Grid container spacing={32} justify="center">
                            <Grid item>
                                <PersonImage
                                    personId={metadata.id}
                                    height={175}
                                    width={175}
                                />
                            </Grid>
                            <Grid item style={{ flexGrow: 1 }}>
                                <Grid
                                    container
                                    spacing={0}
                                    direction="column"
                                    justify="center"
                                    alignItems="stretch">
                                    <Grid item xs={6}>
                                        <Card>
                                            <InfoLabel
                                                label="Skills"
                                                text={profile.skills}
                                            />
                                            <InfoLabel
                                                label="Can Also Work"
                                                text={profile.work}
                                            />
                                            <Grid
                                                container
                                                spacing={16}
                                                justify="center">
                                                <Grid item>
                                                    <InfoLabel
                                                        label="Home Phone"
                                                        text={
                                                            contactInfo.homePhone
                                                        }
                                                    />
                                                    <InfoLabel
                                                        label="Cell Phone"
                                                        text={
                                                            contactInfo.mobilePhone
                                                        }
                                                    />

                                                    <InfoLabel
                                                        label="Email"
                                                        text={contactInfo.email}
                                                    />
                                                </Grid>
                                            </Grid>
                                        </Card>

Answer 1

您可以为此目的使用网格。

您的网格布局存在一些问题，您的间距太高了。间距应低于 12，间距太大会将内容推到下一行，这就是此处发生的情况。

我创建了一个 sandbox向您展示如何设置网格。它缺少大部分样式，但布局如您所愿。