1
Я ожидал, что он останется в той же строке с остальным содержимым div #level (divs # square7, # square8, # square9), но что # square6 div берет всю строку для себя. Я был бы признателен за помощь в исправлении этого.Почему один из элементов div перемещает остальную часть содержимого контейнера на следующую строку после использования анимации ключевых кадров?
https://jsfiddle.net/k8vgja90/1/
Сырье Код:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Dominoes</title>
</head>
<body>
<div id="level1" class="level">
<div id="square1" class="square"></div>
</div>
<div id="level2" class="level">
<div id="square2" class="square"></div>
<div id="square3" class="square"></div>
</div>
<div id="level3" class="level">
<div id="square4" class="square"></div>
<div id="square5" class="square"></div>
</div>
<div id="level4" class="level">
<div id="square6" class="square"></div>
<div id="square7" class="square"></div>
<div id="square8" class="square"></div>
<div id="square9" class="square"></div>
</div>
</body>
</html>
.level {
margin: auto;
height: 20px;
}
.level .square {
float: left;
}
.level:after {
content: "";
display: table;
clear: both;
}
.square {
position: relative;
width: 20px;
height: 20px;
background-color: black;
}
#level1 {
width: 20px;
}
#square1 {
margin-top: 100px;
float: none;
animation: sq1Anim 1s ease-in forwards;
}
#level2 {
width: 60px;
}
#square2 {
margin-right: 20px;
animation: sq2Anim 1s ease-out 1s forwards;
}
#square3 {
animation: sq3Anim 1s ease-out 1s forwards;
}
#level3 {
width: 260px;
}
#square4 {
margin-right: 220px;
}
#square4,
#square5 {
animation: lvl3Anim 1s ease-in 2s forwards;
}
#level4 {
margin-top: 100px;
width: 300px;
}
#square6 {
animation: sq6Anim 1s ease-out 3s forwards;
}
#square7 {
margin: 0 180px 0 20px;
}
#square9 {
margin-left: 20px;
}
@keyframes sq1Anim {
0% { top: -100px; background-color: yellow; }
100% { top: 20px; background-color: blue; }
}
@keyframes sq2Anim {
0% { left: 0; background-color: yellow; }
100% { left: -100px; background-color: blue; }
}
@keyframes sq3Anim {
0% { left: 0; background-color: yellow; }
100% { left: 100px; background-color: blue; }
}
@keyframes lvl3Anim {
0% { top: 0; background-color: yellow; }
100% { top: 120px; background-color: blue; }
}
@keyframes sq6Anim {
0% { left: 0; background-color: yellow; }
100% { left: -100px; background-color: blue; }
}