如何解决CSS,div 移动内容更新
我正在尝试使用 HTML/CSS/JS 编码 2048
我使用这个 Html 得到了网格的布局:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>2048</title>
</head>
<body>
<div class = "wrapper">
<div class="gridd">
<div><h1></h1></div>
<div><h1></h1></div>
<div><h1></h1></div>
<div><h1></h1></div>
<div><h1></h1></div>
<div><h1></h1></div>
<div><h1></h1></div>
<div><h1></h1></div>
<div><h1></h1></div>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
为此,我使用了这个 CSS:
* {
margin: 0;
padding: 0;
}
body {
background-color: #C2C2C2;
}
h1 {
font-family: Asap,sans-serif;
font-size: 24pt;
margin-top:35%;
text-align: center;
color: white;
}
.gridd {
width: 340px;
height: 340px;
background-color: #B4B4B4;
border-radius: 15px;
padding: 15px;
position: absolute;
margin: auto;
}
.gridd > div {
width: 100px;
height: 100px;
background-color:#787878;
border-radius: 15px;
margin:5px;
display: inline-block;
}
.wrapper{
position: absolute;
margin: 80px 0 0 200px;
}
我只是使用这个 JS 代码在网格上生成最初的两个:
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
var y = document.getElementsByTagName("H1");
y[getRandomInt(8)].innerHTML = 2;
y[getRandomInt(8)].innerHTML = 2;
现在,在加载时我看到了这个令人不快的场景:
有人可以帮我了解发生了什么吗? 以及如何修复它。 非常感谢。
解决方法
这可以通过更改为 css 文件来简单地修复。使用 display: grid
。
另外,不要使用margin-top: 35%;
。如果您将 h1
或 div
变小或变大,您也必须更改百分比。相反,您可以通过 align-items: center
将其居中。
这是解决问题的整个 css 文件:
* {
margin: 0;
padding: 0;
}
body {
background-color: #c2c2c2;
}
h1 {
font-family: Asap,sans-serif;
text-align: center;
color: white;
}
.wrapper {
margin: 80px 0 0 200px;
border-radius: 15px;
background-color: #b4b4b4;
width: fit-content;
padding: 10px;
}
.gridd {
display: grid;
grid-template-columns: repeat(3,100px);
grid-template-rows: repeat(3,100px);
gap: 5px;
}
.gridd > div {
background-color: #787878;
border-radius: 15px;
display: grid;
align-items: center;
}
无论您的 h1
有多大的文字大小,也无论您的 div
容器有多大,它都会居中。
编辑
事实上,整个过程无需 wrapper
和额外的 div
HTML:
<div class="grid">
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
body {
background-color: #c2c2c2;
}
.grid {
margin: 80px 0 0 200px;
border-radius: 15px;
background-color: #b4b4b4;
width: fit-content;
padding: 10px;
display: grid;
grid-template-columns: repeat(3,100px);
gap: 5px;
}
.grid > h1 {
background-color: #787878;
border-radius: 15px;
display: grid;
align-items: center;
font-family: Asap,sans-serif;
text-align: center;
color: white;
}
,
只需为选择器 flex
添加 .gridd
规则:
.gridd{
...
display: flex;
flex-flow: wrap;
}
并在选择器 display: inline-block
中将 flex: auto
替换为 .gridd >div
:
.gridd >div{
...
flex: auto;
}
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
var y = document.getElementsByTagName("H1");
y[getRandomInt(8)].innerHTML = 2;
y[getRandomInt(8)].innerHTML = 2;
*{margin: 0;
padding: 0;
}
body{
background-color: #C2C2C2;
}
h1{
font-family: Asap,sans-serif;
font-size: 24pt;
margin-top:35%;
text-align: center;
color: white;
}
.gridd{
width: 340px;
height: 340px;
background-color: #B4B4B4;
border-radius: 15px;
padding: 15px;
position: absolute;
margin: auto;
display: flex;
flex-flow: wrap;
}
.gridd >div{
width: 100px;
height: 100px;
background-color:#787878;
border-radius: 15px;
margin:5px;
flex: auto;
}
.wrapper{
position: absolute;
margin: 80px 0 0 200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>2048</title>
</head>
<body>
<div class = "wrapper">
<div class = "gridd" >
<div> <H1></H1> </div>
<div> <H1></H1> </div>
<div> <H1></H1> </div>
<div> <H1></H1> </div>
<div> <H1></H1> </div>
<div> <H1></H1> </div>
<div> <H1></H1> </div>
<div> <H1></H1> </div>
<div> <H1></H1> </div>
</div>
</div>
</body>
<!--script type="text/javascript" src="script.js"></script(-->
</html>
如果您想设置网格布局的样式,您还应该使用网格。它的工具称为 CSS-Grid。它使用 display: grid;
进行声明。要使网格宽度为 3 列,请使用 grid-template-columns: repeat(3,min-content);
。也就是说,您有 3 列与孩子的宽度相同。要在不同的儿童卡片之间留出空隙,您可以使用 grid-gap: 15px;
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
var y = document.getElementsByTagName("H1");
y[getRandomInt(8)].innerHTML = 2;
y[getRandomInt(8)].innerHTML = 2;
* {
margin: 0;
padding: 0;
}
body {
background-color: #C2C2C2;
}
h1 {
font-family: Asap,sans-serif;
font-size: 24pt;
margin-top: 35%;
text-align: center;
color: white;
}
.gridd {
width: min-content;
padding: 15px;
display: grid;
grid-template-columns: repeat(3,min-content);
grid-gap: 15px;
margin: auto;
background-color: #B4B4B4;
border-radius: 15px;
}
.gridd>div {
width: 100px;
height: 100px;
background-color: #787878;
border-radius: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>2048</title>
</head>
<body>
<div class="wrapper">
<div class="gridd">
<div>
<H1></H1>
</div>
<div>
<H1></H1>
</div>
<div>
<H1></H1>
</div>
<div>
<H1></H1>
</div>
<div>
<H1></H1>
</div>
<div>
<H1></H1>
</div>
<div>
<H1></H1>
</div>
<div>
<H1></H1>
</div>
<div>
<H1></H1>
</div>
</div>
</div>
</body>
<!--script type="text/javascript" src="script.js"></script(-->
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。