Question

我期待它与#level div内容的剩余部分（div＃square7，＃square8，＃square9）保持一致，但是＃square6 div为自己占据整行。我很感激帮助解决这个问题。

原始代码：

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

Answer 1

正在寻找这样的东西？？

＆＃13;

 window.onload=function(){

            }//]]>

＆＃13;

.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  , #square8{
                animation: sq6Anim 1s ease-out 3s forwards;
            }

            #square7 {
                margin: 0 180px 0 20px;
            }

            #square9 {
                margin-left: 20px;
            }
            
            #square7 , #square9 {
                animation: sq6Anim2 1s ease-out 3s forwards;
            }

            @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; }
            }
            @keyframes sq6Anim2 {
                0% { right: 0; background-color: yellow; }
                100% { right: -100px; background-color: blue; }
            }

＆＃13;

<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>

＆＃13;

为什么div元素之一在使用关键帧动画后将其余容器内容移动到下一行？

1 个答案: