网格布局：创建CSS，因此当相邻元素调整大小时，元素保持位置 [英] Grid Layout: create CSS so Elements keep position when adjacent element gets resized

问题描述

我想在网格布局中创建一个简单的图像库，我使用类似这样的东西

这只是一个悬停状态，你可以改变宽度 + code>或者您可以使用 transform：scale（）; 。我将缩放元素设置为 position：absolute ，这样您可以确保hovered元素的 z-index 总是最高。

HTML：

 < div class =wrapper> ; 
< ul> 
 // many< li>元素
< / ul> 
< / div> 
  

CSS：

.wrapper {width ：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; 
} 
  

I want to build a simple image gallery in grid layout, and I'm using something like this Zoom on hover to zoom hovered images. But instead the table-style from the link, I'd rather use an UL (unsorted list). Well maybe table is also ok, you tell me :)

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

My problem is - as I'm not very good in this - I don't know how to adjust the CSS so that the elements around the hovered image won't get shifted.. I tried some things like display:block, but I guess I just don't know how would be an easy way to build this at all.. I don't need to show you my current ccs, as it's just a mixed up bunch of sh* o.O

I tried layouts like in the following examples, and the one did the shifting of beneath elements, the other did not "hover-zoom", as all elements were fixed in size:

responsive-image-grids

image-grid-using-css-floats

btw: in the anchor-tag, I'm using the style="..." (is inline-style html5-conform btw?) to individually shift the tiles, to create a bit of a random effect, but also not sure if I would put it there, in the li-tag, or img tag. I just don't wanna put it in the css for each image. Finally it all should look like this:

Do you have some hints, or a helping hand for a very neat and easy css? I don't need nothing fancy, I will crop all my thumbnails by hand (well by photo-editor not scissors), and if it would be too complicated, I would also make the whole grid a fixed size, w/o resizing option. But preferable it should scale or rearrange on windowresize.

解决方案

Here is one solution that may work for you:

Demo Fiddle

It's just a matter of having a hover state where you can change the width+ height or you can use transform: scale();. I set the scaling elements to position: absolute just so you can make sure the z-index of the hovered element is always the highest.

HTML:

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

CSS:

.wrapper {width: 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;
}

这篇关于网格布局：创建CSS，因此当相邻元素调整大小时，元素保持位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！