网格布局：创建 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 以使悬停图像周围的元素不会移动.. 我尝试了一些类似 display:block 的东西，但我想我根本不知道如何简单地构建它。我不需要向你展示我当前的 ccs，因为它只是一堆混合的sh* o.O

我尝试了以下示例中的布局，一个做了下方元素的移动，另一个没有“悬停缩放”，因为所有元素的大小都是固定的：

responsive-image-grids

image-grid-using-css-floats

顺便说一句：在锚标记中，我使用 style="..." （是内联样式 html5-conform btw？）单独移动图块，以创建一些随机效果，但是也不确定我是否会把它放在那里，在 li-tag 或 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 {宽度：300px;}

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;
}