Javascript-форум - Показать сообщение отдельно - Почему когда элемент выводится на новую строку его дочерние элементы не появляются?

BIOkefirchik · #1 (**permalink**) 29.08.2017, 10:48

Доброго времени суток! Недавно я решил попрактиковаться в программировании на JavaScript. Решил я значит создать сайт о суши(в тот момент очень сильно их хотел), и вот я создал конструктор который собирает из элементов единый блок с картинкой и с информацией о суши.
Проблема вот в чём, когда эти блоки переходят на новую строку то, некоторые его дочерние элементы исчезают что делать?

вот код:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <style>
  .sushi {
    float: left;
    margin: 10px;
    height: 320px;
    width: 218px;
    border: 1px solid gray;
  }
  .sushi:hover {border: 1px solid orange;}
  .info {
    text-align: center;
    background: linear-gradient(#f7f7f7, #e2e2e2);
    width: 218px;
    height: 140px;
    position: absolute;
    top: 190px;
    border-top: 1px solid #e7e7e7;
}
.SushiImg {width: 218px;}
.name  {font-size: 22px;}
.withwhat {font-size: 14px; color: gray;}
.num {font-size: 27px;}
.rubl {font-size: 18px;}
.select {
  width: 45px;
  height: 25px;
  font-size: 18px;
  margin-left: 5px;
  border-radius: 5px;
  border: none;
}
.telo {
  background-color: gray;
  width: 720px;
  height: 2000px;
  position: absolute;
  top: 101px;
  left: 320px;
  border-radius: 2px;
}

  </style>

<script>

var telo;

window.onload = function () {
telo = document.createElement('div');
telo.className = 'telo';
document.body.appendChild(telo);

function create(name, withwhat, num, src)  {

var rubl = "<span class = rubl> руб.</span>";

name = "<span class = name>" + name + "</span><br/>";
withwhat = "<span class = withwhat>" + withwhat + ".</span><br/><br/><br/>";
num = "<span class = num>" + num + "</span>";
src = "images/" + src + ".jpg";
select = " <select class = select>"
+"<option>0</option>"
+"<option>1</option>"
+"<option>2</option>"
+"<option>3</option>"
+"<option>4</option>"
+"<option>5</option>"
+"<option>6</option>"
+"<option>7</option>"
+"<option>8</option>"
+"<option>9</option>"
+"<option>10</option>"
+"</select>";

var SushiBlock = document.createElement('div');
SushiBlock.className = "sushi";
SushiBlock.onmouseover = function () {SushiBlock.style.border = "1px solid orange";SushiBlock.style.cursor = "pointer";}
SushiBlock.onmouseout = function () {SushiBlock.style.border = "1px solid gray";}
telo.appendChild(SushiBlock);

var image = document.createElement('img');
image.src = src;
image.className = "SushiImg";
SushiBlock.appendChild(image);

var SushiPodBlock = document.createElement('div');
SushiPodBlock.className = 'info';
SushiPodBlock.innerHTML = name + withwhat + num + rubl + select;
SushiBlock.appendChild(SushiPodBlock);
}
                //create(name, withwhat, num, src) { ... }
create("Сякэ", "С лососем","75", "syake");
create("Эби", "С креветкой", "85", "ebi");
create("Сякэ Кунсэй", "С копчёным лососем", "85", "kunsei");
create("Магуро", "С тунцом", "90", "maguro");
create("Сякэ Кунсей", "С копчёным лососем", "85", "kunsei");
create("Магуро", "С тунцом", "90", "maguro");
create("Унаги", "С угрём", "95", "unagi");
};

</script>
</body>
</html>

Только тут изображения не показывает(((( Я пытался выяснить в чём проблема и заметил что блоки с классом "info" 'приклеивались' к блокам с классом "sushi" находящиеся сверху