css 单击某个格网项会导致该项远远低于鼠标指针

dced5bon  于 2023-01-06  发布在  其他
关注(0)|答案(1)|浏览(115)

我正在学习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>
  );
}
6za6bjd0

6za6bjd01#

要解决此问题,我们需要将style={{ alignItems: "start" }}添加到<GridLayout ...>

相关问题