Html 两侧可推式潜水器

我如何才能使一个div将内容从屏幕左右两侧推到屏幕之外

目前我使用的是property overflow:hidden，因此每当我放大图像时，右侧的内容都会被隐藏，但我也希望左侧也有相同的效果

示例见红色箭头：

---

恐怕你不能。至少不是以直截了当的方式

文档的基本机制就是这样工作的。内容堆栈从左到右内联，从上到下成行

---

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

您需要使用定位包装元素：

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

jQuery

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

---

请注意，这是一个快速的例子，但这正是我的想法。

老实说，我想在JQuery中实现这一点，你能给我举个这样做的例子吗？我试着给主容器留一个负边距。但是效果很糟糕，因为整个div都在向左移动，“hover”不再与光标位置匹配。已经有了这些设置，先生，我面临的唯一问题是内容被推到了右侧，因为根据我们使用的语言，这是唯一可能的方式。我想在JQuery中悬停时使用负边距来解决这个问题，但没有得到很好的效果。我想我现在明白了。你测试了哪些负利润率？我认为这可以帮助你：是问题吗？如果不是，我不明白你的意思。对不起，我试着在最后一项悬停时给它一个-70px，它可以工作，但是如果70px太多，在这种情况下，它会是一个更小的屏幕响应设计。我希望系统自动推送它，这样就不需要进行任何计算，以防出现错误，等等，如果你把你的问题弄得一团糟，我们可以更好地帮助你。

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