我正在学习React网格布局,但我不能解决这个问题。当我试图拖动一个网格,它移动到我的光标右侧,而且每个网格呈现在中间开始。
我想创建一个布局,如Here示例所示
这里你可以看到我的问题的演示
我使用的代码如下所示这是网格styles_grid.css的css
import GridLayout from "react-grid-layout";
import "./react_grid_layout/styles_grid.css";
import "./react_grid_layout/styles.resize.css";
function Dashboard(props) {
return (
<GridLayout className="layout" cols={12} rowHeight={30} width={1200}>
<div className="bg-white" key="a" data-grid={{ x: 0, y: 0, w: 1, h: 2 }}>
a
</div>
<div className="bg-white" key="b" data-grid={{ x: 1, y: 0, w: 3, h: 2 }}>
b
</div>
<div className="bg-white" key="c" data-grid={{ x: 4, y: 0, w: 1, h: 2 }}>
c
</div>
</GridLayout>
);
}
1条答案
按热度按时间6za6bjd01#
要解决此问题,我们需要将
style={{ alignItems: "start" }}
添加到<GridLayout ...>