Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/84.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 在网格中移动不同大小的按钮_Html_Css_Grid_Css Grid - Fatal编程技术网

Html 在网格中移动不同大小的按钮

Html 在网格中移动不同大小的按钮,html,css,grid,css-grid,Html,Css,Grid,Css Grid,我有网格,在那里我有不同大小的div。在div中,我有一些按钮,试图将它们放置在每个网格的底部。看看我想做什么,我知道我可以用课堂来做。但我想知道是否有任何方法可以只使用一个元素按钮将所有按钮移动到网格中的一个位置,或者我必须为那个长的网格div定义另一个类 .网格容器{ 显示:网格; 网格模板区域:a b c a b c a b c a b c d e b c d e b c d e f f f f f f f; 栅极间隙:30px; 高度:900px; 填充:10px; 保证金:自动; 宽

我有网格,在那里我有不同大小的div。在div中,我有一些按钮,试图将它们放置在每个网格的底部。看看我想做什么,我知道我可以用课堂来做。但我想知道是否有任何方法可以只使用一个元素按钮将所有按钮移动到网格中的一个位置,或者我必须为那个长的网格div定义另一个类

.网格容器{ 显示:网格; 网格模板区域:a b c a b c a b c a b c d e b c d e b c d e f f f f f f f; 栅极间隙:30px; 高度:900px; 填充:10px; 保证金:自动; 宽度:80%; 边缘底部:100px; } .grid容器>div{ 文本对齐:居中; 填充:20px0; 字体大小:30px; 边界半径:10px; 盒影:10px 9px 33px-12px rgba0,0,0,0.95; 颜色:fff; } .项目1{ 网格面积:a; 背景图像:线性-梯度-70度,fff,rgb52,206,167,rgb19,172,133; } .项目2{ 网格面积:b; 背景图像:线性-梯度-90度,0F2027,0F2027; } .项目3{ 网格面积:c; 背景图像:线性梯度180度,F2994A,F2C94C } .项目4{ 网格面积:d; 背景图像:线性梯度180度,2980B9,6DD5FA,fff; } .项目5{ 网格面积:e; 背景图像:线性梯度180度,faaca8,ddd6f3,faaca8 } .项目6{ 网格面积:f; 背景图像:线性-梯度-90度,2980B9,6DD5FA,fff; } 按钮项{ 显示:网格; 填充:12px 18px; 字体大小:13px; 边界半径:10px; 边框:1px实心fff; 背景色:透明; 颜色:rgb255、255、255; 位置:相对位置; 顶部:190px; 左:30px; 光标:指针; } 阅读更多1 阅读更多2 阅读更多3 阅读更多4 阅读更多5 阅读更多6 添加位置:相对位置;到网格项。网格容器>div。这允许您将按钮放置在各自的容器中

添加位置:绝对位置;将“底部”和“左侧”值一起添加到按钮,以将它们放置在左下角

.网格容器{ 显示:网格; 网格模板区域:a b c a b c a b c a b c d e b c d e b c d e f f f f f f f; 栅极间隙:30px; 高度:900px; 填充:10px; 保证金:自动; 宽度:80%; 边缘底部:100px; } .grid容器>div{ 文本对齐:居中; 填充:20px0; 字体大小:30px; 边界半径:10px; 盒影:10px 9px 33px-12px rgba0,0,0,0.95; 颜色:fff; 位置:相对位置; } .项目1{ 网格面积:a; 背景图像:线性-梯度-70度,fff,rgb52,206,167,rgb19,172,133; } .项目2{ 网格面积:b; 背景图像:线性-梯度-90度,0F2027,0F2027; } .项目3{ 网格面积:c; 背景图像:线性梯度180度,F2994A,F2C94C } .项目4{ 网格面积:d; 背景图像:线性梯度180度,2980B9,6DD5FA,fff; } .项目5{ 网格面积:e; 背景图像:线性梯度180度,faaca8,ddd6f3,faaca8 } .项目6{ 网格面积:f; 背景图像:线性-梯度-90度,2980B9,6DD5FA,fff; } 按钮项{ 填充:12px 18px; 字体大小:13px; 边界半径:10px; 边框:1px实心fff; 背景色:透明; 颜色:rgb255、255、255; 位置:绝对位置; 底部:30px; 左:30px; 光标:指针; } 阅读更多1 阅读更多2 阅读更多3 阅读更多4 阅读更多5 阅读更多6