并排放置元素

Question

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

我在父divs中有4 div 2我想要推送动画的框，以及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>

Answer 1

您可以display:inline-block使用#leftBox＆amp; #rightBox将它们并排放置。对于动画，请用另一个div(#wrapper)＆amp;在点击时更改#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'
        });
    });
});