并排放置元素 [英] Place elements side by side

问题描述

我正在尝试创建推式动画，其中一个元素推动"另一个.

I am trying to create a push animation, where one element 'pushes' the other.

我在父级div中有4个divs，其中2个是希望进行推送动画的框，还有2个按钮" divs.包装器div没有设置高度.

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.

问题是，第二个框div被放置在第一个框div下.我如何才能使它们彼此左右对齐，而不是彼此重叠.

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.

我还需要一些动画方面的帮助.我如何获得一个盒子div来推"另一个盒子?

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&上使用display:inline-block #rightBox使其并排放置.对于动画，请用另一个div(#wrapper)和&更改#wrapper的位置.

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 .

示例: 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'
        });
    });
});

这篇关于并排放置元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！