我正在使用 React 和 Material-ui 创建一个网络应用程序。我需要一个 map 组件的响应式方形 div,但是,使用 a trick from iamsteve.me破坏了网格布局,因为父网格 div 没有展开。
我试过将正方形的类移动到网格元素,但这没有帮助。
map: {
height: '100%', width: '100%', position: 'absolute'
},
mapContainer: {
height: '0',
paddingBottom: '100%',
position: 'relative'
},
<Grid item>
<div className={classes.mapContainer}>
<Paper className={classes.map}>
// map
</Paper>
</div>
</Grid>
Grid 项的高度与正方形的大小不匹配。这是后续元素的问题。
最佳答案
对于 responsive
方 block ,你应该使用 Grid由 Material-UI
提供。
使用 Grid
的代码中的一个简单更改可能是这样的
<Grid container justify={"center"}>
<Grid item xs={6}>
<Paper className={classes.paper}>Your Map Here</Paper>
</Grid>
</Grid>
要限制包含元素的宽度,你可以这样做
root: {
flexGrow: 1,
height: "50vh",
width: "50vh"
},
我已经在 https://codesandbox.io/s/material-demo-pjssu 更新了一个演示它的 Codesandbox。
希望对您有所帮助。谢谢
关于html - 网格元素高度不匹配响应方形 child ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57569662/