網格佈局：創建CSS使元素保持位置，當相鄰的元素被調整大小

Question

我想在網格佈局中構建一個簡單的圖庫，並使用類似這樣的東西 Zoom on hover來放大圖像。 但是，從鏈接的表格樣式，我寧願使用UL（未排序的列表）。嗯，也許表也行，你告訴我:)

<ul id="grid"> 
    <li class="thumb"><a href="images/001.jpg" style="position:relative; left:2px; top:1px"> 
     <img class="" src="images/001thumb.jpg" alt="" onMouseOver="JSFX.zoomIn(this)" onMouseOut="JSFX.zoomOut(this)"> 
    </a></li> 
    <li class="thumb"><a href="images/002.jpg" style="position:relative; left:3px; top:0px"> 
     <img class="" src="images/002thumb.jpg" alt="" onMouseOver="JSFX.zoomIn(this)" onMouseOut="JSFX.zoomOut(this)"> 
    </a></li> 
    <li class="thumb"><a href="images/003.jpg" style="position:relative; left:1px; top:1px"> 
     <img class="" src="images/003thumb.jpg" alt="" onMouseOver="JSFX.zoomIn(this)" onMouseOut="JSFX.zoomOut(this)"> 
    </a></li> 
    <li class="thumb"><a href="images/004.jpg" style="position:relative; left:0px; top:0px"> 
     <img class="" src="images/004thumb.jpg" alt="" onMouseOver="JSFX.zoomIn(this)" onMouseOut="JSFX.zoomOut(this)"> 
    </a></li> 
    <li class="thumb"><a href="images/005.jpg" style="position:relative; left:2px; top:3px"> 
     <img class="" src="images/005thumb.jpg" alt="" onMouseOver="JSFX.zoomIn(this)" onMouseOut="JSFX.zoomOut(this)"> 
    </a></li> 
</ul> 

我的問題是 - 因爲我不是很好在這一點 - 我不知道如何調整CSS使周圍徘徊的元素圖像不會移位.. 我嘗試了一些東西，如顯示：塊，但我想我只是不知道如何將是一個簡單的方法來建立這個..我不需要告訴你我的當前ccs，因爲它只是混合起來的一堆sh * oO

我嘗試了下面的例子中的佈局，其中一個在元素下方移動，另一個沒有「懸停放大」，因爲所有元素都是固定大小：

responsive-image-grids

image-grid-using-css-floats

BTW：在錨標記，我使用了風格= 「...」（被內嵌式BTW HTML5的符合？）單獨轉移的瓷磚，以創建一些隨機效果，但也不確定是否將它放在li標籤或img標籤中。我只是不想把它放在每張圖片的CSS中。 最後，它都應該是這樣的：

你有一些提示，或者一個非常整潔且易於CSS伸出援助之手？我不需要任何花哨的東西，我會手工剪輯所有的縮略圖（以及剪輯不是剪輯），如果它太複雜，我也會使整個網格的大小固定，沒有調整大小的選項。但更可取的是它應該縮放或重新排列windowresize。

Answer 1

這裏是一個解決方案，它可以爲你工作：

Demo Fiddle

這只是一個有懸停狀態，你可以改變width + height或者您可以使用transform: scale();的問題。我將縮放元素設置爲position: absolute，因此您可以確保懸停元素的z-index始終最高。

HTML：

<div class="wrapper"> 
    <ul> 
     // many <li> elements 
    </ul> 
</div> 

CSS：

.wrapper {寬度：300像素;}

li { 
    display: inline-block; 
    height: 40px; 
    width: 40px; 
    position: relative; 
    padding: 3px; 
} 
a { 
    display: block; 
    height: 40px; 
    width: 40px; 
    background: lightblue; 
    position: absolute; 
    -webkit-transition: .3s; 
    transition: .3s; 
} 
a:hover { 
    -webkit-transform: scale(2,2); 
    transform: scale(2,2); 
    z-index: 100; 
    background: lightgreen; 
}