假设我有三个图像。一个是其他两个高度的两倍,我想设计一个简单的网格,其中两个较小的网格垂直堆叠在较大的网格的右侧。照片的长宽比表示,如果较大的占2行x 3列,较小的占1行x 2列,则它们将以五列布局工作。我正在使用Material UI GridList组件(https://material-ui.com/api/grid-list/),并遵循API文档。无论我使用什么设置,一个较小的图像都会在较大的图像的右侧呈现,然后在其下方有一个相等大小的空白区域,而第三个图像则垂直堆叠在左侧较大的图像下方。
我怀疑这不是特定于React的,而是一些我不熟悉的简单HTML或CSS问题。我想我期望组件自动执行此操作。在演示(https://material-ui.com/demos/grid-list/)中,它会自动用图像填充水平空间,但现在我正在寻找,它对垂直空间的显示效果并不相同。
import React, {Component} from "react";
import ReactDOM from 'react-dom';
import GridList from '@material-ui/core/GridList';
import GridListTile from '@material-ui/core/GridListTile';
import GridListTileBar from '@material-ui/core/GridListTileBar';
export class ImageGrid extends React.Component{
constructor(props){
super(props);
}
render() {
const tileData = [
{
img: "ex_1.jpg",
title: 'Image',
author: 'author',
cols: 3,
rows:2,
},
{
img: "ex_3.jpg",
title: 'Image',
author: 'author',
cols: 2,
rows:1,
},
{
img: "ex_2.jpg",
title: 'Image',
author: 'author',
cols: 2,
rows:1,
},
];
const styles = theme => ({
root: {
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'space-around',
overflow: 'hidden',
backgroundColor: theme.palette.background.paper,
},
gridList: {
width: 1384,
height: 320,
float:right,
},
});
return (
<div className={styles.root}>
<GridList component='div' cellHeight={150} spacing={8} cols={5} className={styles.gridList}>
{tileData.map(tile => (
<GridListTile component='div' cols={tile.cols} rows={tile.rows} key={tile.img}>
<img src={tile.img} alt={tile.title} />
<GridListTileBar
title={tile.title}
subtitle={tile.author}
/>
</GridListTile>
))}
</GridList>
</div>
);
}
}