使用CSS並排2格-一招

Question

如何將兩個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上下移動嗎？

Answer 1

由於您已使用CSS標記了此問題，而Jquery / Javascript沒有使用CSS關鍵幀動畫。 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

您可以通過兩種方式做到這一點：

1. 添加樣式display:block
2. 將第二個div float:right到右邊float:right

Answer 3

您可以使用display：inline-block並上下移動B div。

 <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

您可以將右，底和左邊界設為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>