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>

2048 frontend html javascript

CSS，div 移动内容更新

问题描述

解决方法

相关问答