CSS, перемещение разделов при обновлении содержимого

ProgramBox

CSS, перемещение разделов при обновлении содержимого

Post author:admin
Запись опубликована:25 октября, 2022
Post category:Вопросы по программированию

#javascript #html #css #frontend #2048

#javascript #HTML #css #интерфейс #2048

Вопрос:

Я пытаюсь написать код 2048, используя HTML / CSS / JS

Я получил макет сетки, используя этот 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;

Теперь при загрузке я получаю эту неприятную сцену:

Может кто-нибудь помочь мне понять, что происходит, пожалуйста? И как это исправить. Большое спасибо.

1. на самом деле вы не предъявляете иск к сетке, пока используете ее. Прочитайте CSS-grid, это должно легко решить проблему для вас. Не используйте абсолютное или относительное позиционирование, сделайте чистую сетку css 3×3.

Ответ №1:

Просто добавьте 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>

Развернуть фрагмент

1. Большое спасибо, многому научившись из ответов, не могли бы вы, пожалуйста, объяснить мне, что именно в моем коде вызвало проблему?

2. @Majd, В общем, вашу проблему можно решить по-разному. Мой способ flex похож на один из вариантов. И причиной нарушения порядка gridd >div является правило по умолчанию display: block , которое у вас есть h1 .

Ответ №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);
  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;
}

1. Большое спасибо, многое узнав из ответов, не могли бы вы объяснить мне, что именно в моем коде вызвало проблему?

2. Главным образом, ее чрезмерное использование position: absolute; . Управлять ими довольно утомительно, особенно если у вас их несколько для управления областями содержимого. Если одна из областей содержимого станет больше или меньше из-за изменения вашего содержимого, макет тоже может измениться и привести к беспорядку. Поскольку JS загружается после css и html, содержимое суммируется, а контейнер absolute div становится больше, и это портит макет. position: absolute; следует использовать только в том случае, когда вам требуется, чтобы контейнер выходил за пределы его родительского контейнера. Например: выпадающий список меню. Надеюсь, это поможет, @Majd

3. Кроме того, поскольку пользователь sergey kuznetsov отправил сообщение с ответом об использовании display: flex , это также правильно. Но flex действительно старый. CSS-grid новее и все больше вытесняется в реальной жизни. Но, как и во всякой великой вещи, есть и минусы. Css-grid работает не во всех браузерах. Существует несколько браузеров, которые не поддерживают все функции css в актуальном состоянии. Но большинство самых популярных браузеров поддерживают это без проблем.

Ответ №3:

Если вы хотите создать макет сетки, вам также следует использовать сетку. Инструмент для этого называется CSS-Grid. Это произошло при использовании display: grid; . Чтобы иметь сетку шириной в 3 столбца, вы используете grid-template-columns: repeat(3, min-content); . Таким образом, у вас есть 3 столбца с шириной дочерних элементов. Чтобы иметь разрыв между различными картами chidlren, вы используете 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>

Развернуть фрагмент

1. не следует использовать margin-top: 35%; для центрирования текста. На самом деле, даже в вашем примере текст не центрирован. нижняя 27px часть осталась, а верхняя осталась 35px . Кроме того, это не изменило бы его автоматически, если h1 бы размер текста был изменен. вместо этого следует использовать align-items: center или transform , но поскольку css-grid уже используется, align-items: center выполняет свою работу

2. после того, как вы отредактировали свой код. Я просто скопировал ваш код, объединил его и реализовал сетку. Все остальные стили — это чисто ваш код. Вы спросили, как исправить вызванное вами смещение абсолютного и относительного позиционирования yb, которое было исправлено. это никогда не было связано с чем-то другим.

3. ? I’m… не тот человек, который задал этот вопрос. Я просто человек, который предоставил ответ и информацию любому другому читателю, почему margin-top: 35%; в этом случае не следует использовать. Извините за недопонимание или за то, что вы каким-либо образом расстроили вас, но я не Majd (автор вопроса).

4. Большое спасибо, многое узнав из ответов, не могли бы вы объяснить мне, что именно в моем коде вызвало проблему?