Доброго времени суток! Недавно я решил попрактиковаться в программировании на 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" находящиеся сверху
