雙方可推送的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); 
}); 

請注意，是一種快速的例子，但它的想法。