并排放置元素(Place elements side by side)

我正在尝试创建一个推动动画，其中一个元素“推”另一个元素。

我在父div有4个divs我是想要推动动画的盒子，以及2个'按钮' divs 。 包装器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> 
  
 
I am trying to create a push animation, where one element 'pushes' the other.
 
I have 4 divs in a parent div 2 are boxes that I want the push animation happening on, and 2 'button' divs. The wrapper div doesn't have a set height.
 
The problem is, the second box div gets placed under the first box div. How can I get them to be right and left of each other, not one on top of the other.
 
Also, I need a bit of help with the animation. How can I get one box div to 'push' the other?
 
This is what I mean by 'push' effect:
 
 
 
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> 
  
 

                
最满意答案
                
                    
                        
 您可以在#leftBox ＆ #rightBox上使用display:inline-block将它们并排放置。 对于动画，用另一个div(#wrapper)包装它们并在点击时改变#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'
        });
    });
});
You can use display:inline-block on #leftBox & #rightBox to place them side by side. For animation, wrap them with another div(#wrapper) & change the position of #wrapper on click .
 
Example: 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'
        });
    });
});