我目前正在显示用户个人资料详细信息。我正在尝试使用以下信息设置卡。我希望这些项目并排放置,而不是按照下面的图片划分它们的位置。
我尝试为每个项目指定一个网格项目,但只是将它们全部列在下面。我试图让skills
和home phone
并排坐在同一行
can also work
和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>
答案 0 :(得分:1)
您可以为此目的使用网格。
您的网格布局存在一些问题,并且间距很大。间距应小于12,太大的间距会将内容推入下一行,这就是这里的情况。
我创建了一个sandbox,向您展示如何设置网格。它缺少大多数样式,但是布局就像您想要的那样。