CSS，div 在内容更新时四处移动

Question

我正在尝试使用 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;

现在，在加载时我遇到了这个不愉快的场景：

有人可以帮我理解这是怎么回事吗？以及如何修复它。非常感谢。

Answer 1

如果要设置网格布局的样式，还应该使用网格。它的工具称为 CSS-Grid。它使用 display: grid; 声明。要使网格有 3 列宽，请使用 grid-template-columns: repeat(3, min-content);。那你有 3 列，宽度为 children。要在不同的儿童卡片之间留出间隙，您可以使用 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>

Answer 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;
}

无论文本大小如何，无论您的 div 容器有多大，它都会使您的 h1 居中。

编辑

事实上，这整件事不需要 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);
  grid-template-rows: 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;
}

Answer 3

只需为选择器添加 flex 规则 .gridd:

.gridd{
    ...
    display: flex;
    flex-flow: wrap;
}

并在选择器 .gridd >div:

中将 display: inline-block 替换为 flex: auto

.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，div 在内容更新时四处移动

CSS, divs moving around on content update

html

javascript

css

frontend

2048