双方可推动的div

Question

我如何能够向两侧（右侧和左侧）制作div推送内容（屏幕外）？

目前我正在使用属性溢出：隐藏（因此，每当我放大图像时，右侧的内容都将被隐藏，但我也希望左侧具有相同的效果）

示例（见红色箭头）：

Answer 1

我怕你不能。至少不是一种直截了当的方式。

这是文档的基本机制如何工作。内容堆栈从左到右内联，从上到下依次排列。

要创建您描述的效果，您必须使用JavaScript。例如，所有图像的父容器可以具有其位置：relative，并且在选择图像时，将图像大小的一半移动到左侧，设置其左css属性。

Answer 2

你需要用定位来包装元素：

<div class="wrap">
    <div class="moving-wrapper">
      <div class="element"></div>
      <div class="element"></div>
      <div class="element"></div>
    </div>
</div>

CSS

.wrap {
     width: 100%; 
     position: relative;
}
.moving-wrapper {
     position: absolute;
     left: 0;
     top: 0;
}
.element {
      display: inline-block;
      vertical-align: middle;
      width: 100px;
}

的jQuery

 //example clicking a element
 $('.element').on('click', function(e) {
       e.preventDefault();
       var position = $(this).offset;
       $('.moving-wrapper').animate({ left: (position.left * -1) },250);
 });

请注意，这是一个快速的例子，但这是个主意。