html - 使用CSS并排2格-一招

如何将两个div并排放置
其中之一正在不断地上下移动
并包含img

我尝试了这个：

 <div>
 <div style="margin:30px;width:100px;height:250px;position:relative;float:left;background-color:red;">A</div>
 <div style="margin:30px;width:100px;height:50px;position:relative;float:left;background-color:blue;">B</div>
</div>

我可以让B div上下移动吗？

最佳答案

由于您已使用CSS标记了此问题，而Jquery / Javascript没有使用CSS关键帧动画。是not supported in IE<=9。

div.boxB {
    -webkit-animation: move 5s linear infinite;
    -moz-animation: move 5s linear infinite;
    animation: move 5s linear infinite;
}

@-webkit-keyframes move {
    0% {
        margin-top: 30px;
    }
    25% {
        margin-top: 100px;
    }
    50% {
        margin-top: 180px;
    }
    75% {
        margin-top: 100px;
    }
    100% {
        margin-top: 30px;
    }
}

@-moz-keyframes move {
    0% {
        margin-top: 30px;
    }
    25% {
        margin-top: 100px;
    }
    50% {
        margin-top: 180px;
    }
    75% {
        margin-top: 100px;
    }
    100% {
        margin-top: 30px;
    }
}
@keyframes move {
     0% {
        margin-top: 30px;
    }
    25% {
        margin-top: 100px;
    }
    50% {
        margin-top: 180px;
    }
    75% {
        margin-top: 100px;
    }
    100% {
        margin-top: 30px;
    }
}

<div>
    <div style="margin:30px;width:100px;height:200px;position:relative;float:left;background-color:red;">A</div>
    <div class="boxB" style="margin:30px;width:100px;height:50px;position:relative;float:left;background-color:blue;">B</div>
</div>