並排放置元素

Question

我正在嘗試創建推式動畫，其中一個元素“推動”另一個。

我在父div有4個divs ，其中2個是我希望在其上進行推送動畫的框，另一個是2個“ button” divs 。 wrapper div沒有設置高度。

問題是，第二個div框被放置在第一個div框下面。 我如何才能使它們彼此左右對齊，而不是彼此重疊。

另外，我需要有關動畫的一些幫助。 如何獲得一個框div來“推”另一個框？

這就是“推”效應的意思：

的jsfiddle

 $(document).ready(function() { "use strict"; $('#leftBtn').click(function() { $('#leftBox').animate({ left: '-200px' }); $('#rightBox').animate({ left: '-200px' }); }); $('#rightBtn').click(function() { $('#leftBox').animate({ left: '200px' }); $('#rightBox').animate({ left: '200px' }); }); }); 

 #wrapper { width: 400px; background-color: chocolate; margin: auto; overflow: hidden; } #leftBox, #rightBox { width: 400px; height: 100px; display: inline-block; position: relative; } #rightBox { left: 400px; } #leftBtn, #rightBtn { width: 200px; height: 30px; display: inline-block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wrapper"> <div id="leftBox" style="background-color: cornflowerblue;">Hello </div><div id="rightBox" style="background-color: darkkhaki;">Bye Bye </div><div id="leftBtn" style="background-color: yellowgreen;">Click Me </div><div id="rightBtn" style="background-color: yellow;">No, Click Me!</div> </div> 

Answer 1

您可以在#leftBox和#rightBox上使用display:inline-block #rightBox放置它們。 對於動畫，請用另一個div(#wrapper)包裝它們， #wrapper在click上更改#wrapper的位置。

示例： JSFiddle

HTML：

<div id="wrapper">
  <div id="slider">
    <div id="leftBox" style="background-color: cornflowerblue;">Hello
    </div>
    <div id="rightBox" style="background-color: darkkhaki;">Bye Bye
    </div>
  </div>

  <div id="buttons">
    <div id="leftBtn" style="background-color: yellowgreen;">Click Me
    </div>
    <div id="rightBtn" style="background-color: yellow;">No, Click Me!</div>
  </div>
</div>

JS：

$(document).ready(function() {
    "use strict";

    $('#leftBtn').click(function() {
        $('#slider').animate({
            left: '-400px'
        });
    });

    $('#rightBtn').click(function() {
        $('#slider').animate({
            left: '0px'
        });
    });
});