使用CSS并排2格-一招

Question

How can I place two div side by side One of them is moving continuously up and down and containing img

I tried this :

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

Can I make the B div move up and down ?

Answer 1

Since you have tagged this question with CSS and not Jquery/Javascript am using CSS keyframes animations. It is 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> 

Answer 2

you can do it in two ways:

1. add in your style display:block
2. float the second div to right float:right

Answer 3

You can use display: inline-block and move your B div up and down with top and bottom.

 <div> <div style="30px 0 0 0;width:100px;height:250px;position:relative;display: inline-block;background-color:red;">A</div> <div style="30px 0 0 0;width:100px;height:50px;position:relative;display: inline-block;background-color:blue;top: 90px;">B</div> </div> 

Answer 4

you can have it side by side by making the right,bottom and left margins to 0px.

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