gpt4 book ai didi

css - 使用可变数量的单元格创建固定大小的网格

转载 作者:行者123 更新时间:2023-11-28 10:05:52 24 4
gpt4 key购买 nike

我正在尝试创建一个包含在 960x960 像素容器中的最大 64x64 的网格。不幸的是,我不确定具体如何实现。我试过基于百分比来做,但后来我的细胞完全消失了。谁能给我任何见解?

.square 
{
display: table-cell;
vertical-align: middle;
text-align: center;

height: 1.67%; // I have no idea what I'm doing here
max-height: 6.25%;
width: 1.67%;
max-width: 6.25%;

background-color: white;
}

#container
{
width: 960px;
height: 960px;

display: inline-block;
}

最佳答案

有几种方法可以根据您要查找的内容来执行此操作,但这是一种解决方案:Fiddle

#container {
width: 100%;
height: 100%;
max-height: 480px;
max-width: 480px;
background: red;
}

.square {
height: 100%;
width: 100%;
max-width: 64px;
max-height: 64px;
display: inline-block;
/* or use float: left; */
background: yellow;
}

这是一个完全响应的版本:Fiddle2

#container {
width: 100%;
height: 100%;
max-height: 480px;
max-width: 480px;
background: red;
}

.square {
padding-bottom: 19%;
width: 19%;
display: inline-block;
/* or use float: left; */
background: yellow;
}

关于css - 使用可变数量的单元格创建固定大小的网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24562617/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com