如何阻止动画div移动到移动位置

I have a line of 8 divs within divs on this page. http://etreecycle.co.uk/websites/MPW/admin/

我在这个页面上有一个8行内的div。 http://etreecycle.co.uk/websites/MPW/admin/

As you can see when you hover the expanding effect causes the line of divs to move place. This has only started happening since I added the images to the centre.

正如您在悬停时所看到的那样,扩展效果会导致div行移动到位。自从我将图像添加到中心以来,这种情况才刚刚开始。

EDIT; I added the link at the same time as the images. This may be causing the change.

编辑;我在图像的同时添加了链接。这可能会导致变化。

Note; the divs are made with a PHP loop, so I can't style one differently then another.

注意; div是用PHP循环创建的,所以我不能以不同的方式设置另一个。

This is the basic code;

这是基本代码;

<div class="option-box">
    <a href="<?php echo './?page='.$box['page'][0]; ?>">
        <div class="inner">
            <div class="content">
                <img alt="<?php echo $box['name'][0]; ?>" src="<?php echo $box['image_URL'][0]; ?>"/>
            </div>
        </div>
    </a>
</div>

And this is the CSS;

这就是CSS;

/*********** Option Boxes ***********/
.option-box-wrap {
    position: relative;
    width: 1210px;
    margin: 0 auto;
}
.option-box {
    width: 300px;
    margin: 0 auto;
    position: relative;
    display: inline-block;
}
.option-box .inner {
  position: relative;
  padding-bottom: 30px;
  height: 300px;
  text-align: center;
}
.option-box .inner .content:after {
    content:'';
    display: block;
    position: absolute;
    left: 12%;
    bottom: 0px;
    width: 80%;
    max-width: 210px;
    height: 10px;
    background: transparent;
    border-radius: 100px/50px;
    box-shadow: 0 50px 40px rgba(0,0,0,0.8);
}

.option-box .inner .content {
      border: 4px solid #fff;
      border-radius: 20px;
      background: -webkit-linear-gradient(#8AC007 100%, #8ac007 0%, #a5e116 100%);
      width: 240px;
      height: 240px;
      display: block;
      position: relative;
      margin: 0 auto;
      -webkit-transition: all .2s ease;
      -moz-transition: all .2s ease;
      -ms-transition: all .2s ease;
      -o-transition: all .2s ease;
      transition: all .2s ease;
}

.option-box .inner .content:hover {
    width: 250px;
    height: 250px;
}
.option-box .inner .content img {
    width: 90%;
    height: 90%;
    margin: 5%;
}

2 个解决方案

#1

This is a case where float: left wins over display: inline-block. You're using inline-block in order to make your div's sit next to each other. When you hover the height changes and pushes the other elements down. If you use float: left then the elements are taken out of the flow of the document and can no longer influence each other in such a way.

这是float:left胜过display:inline-block的情况。你正在使用内联块,以使你的div彼此相邻。当您悬停高度变化并向下推动其他元素时。如果使用float:left,那么元素将从文档流中取出,并且不再以这种方式相互影响。

/*********** Option Boxes ***********/
.option-box-wrap {
    position: relative;
    width: 1210px;
    margin: 0 auto;
}
.option-box {
    width: 300px;
    margin: 0 auto;
    position: relative;
    float: left;
}
.option-box .inner {
  position: relative;
  padding-bottom: 30px;
  height: 300px;
  text-align: center;
}
.option-box .inner .content:after {
    content:'';
    display: block;
    position: absolute;
    left: 12%;
    bottom: 0px;
    width: 80%;
    max-width: 210px;
    height: 10px;
    background: transparent;
    border-radius: 100px/50px;
    box-shadow: 0 50px 40px rgba(0,0,0,0.8);
}

.option-box .inner .content {
      border: 4px solid #fff;
      border-radius: 20px;
      background: -webkit-linear-gradient(#8AC007 100%, #8ac007 0%, #a5e116 100%);
      width: 240px;
      height: 240px;
      display: block;
      position: relative;
      margin: 0 auto;
      -webkit-transition: all .2s ease;
      -moz-transition: all .2s ease;
      -ms-transition: all .2s ease;
      -o-transition: all .2s ease;
      transition: all .2s ease;
}

.option-box .inner .content:hover {
    width: 250px;
    height: 250px;
}
.option-box .inner .content img {
    width: 90%;
    height: 90%;
    margin: 5%;
}

<div class="option-box">
    <a href="#">
        <div class="inner">
            <div class="content">
                <img alt="" src="http://lorempixel.com/300/300/city"/>
            </div>
        </div>
    </a>
</div><div class="option-box">
    <a href="#">
        <div class="inner">
            <div class="content">
                <img alt="" src="http://lorempixel.com/300/300/food"/>
            </div>
        </div>
    </a>
</div><div class="option-box">
    <a href="#">
        <div class="inner">
            <div class="content">
                <img alt="" src="http://lorempixel.com/300/300/nightlife"/>
            </div>
        </div>
    </a>
</div><div class="option-box">
    <a href="#">
        <div class="inner">
            <div class="content">
                <img alt="" src="http://lorempixel.com/300/300/sports"/>
            </div>
        </div>
    </a>
</div><div class="option-box">
    <a href="#">
        <div class="inner">
            <div class="content">
                <img alt="" src="http://lorempixel.com/300/300/people"/>
            </div>
        </div>
    </a>
</div><div class="option-box">
    <a href="#">
        <div class="inner">
            <div class="content">
                <img alt="" src="http://lorempixel.com/300/300/transport"/>
            </div>
        </div>
    </a>
</div><div class="option-box">
    <a href="#">
        <div class="inner">
            <div class="content">
                <img alt="" src="http://lorempixel.com/300/300/cats"/>
            </div>
        </div>
    </a>
</div><div class="option-box">
    <a href="#">
        <div class="inner">
            <div class="content">
                <img alt="" src="http://lorempixel.com/300/300/abstract"/>
            </div>
        </div>
    </a>
</div>

Simply changing display: block to float: left fixes the issue. This is not the only way to fix it, just one of many. If you use this way you will want to make sure to clear your float. The clearfix method works nicely.

只需更改display:block to float:left即可解决问题。这不是修复它的唯一方法,只是其中之一。如果您使用这种方式,您将需要确保清除您的浮动。 clearfix方法很好用。

#2

When you animate the height property, the size of the animated container changes, and so the entire "row" of images takes more space, which pushes the next row downwards. Have a look at this illustration (the background was colored red for clarity):

当您为height属性设置动画时,动画容器的大小会发生变化,因此整个“行”图像会占用更多空间,从而向下推动下一行。看看这个插图(为了清晰起见,背景为红色):

Instead of animating via width and height properties, which affect a layout change in the page, simply use the transform property, which doesn't affect the page flow:

而不是动画通过宽度和高度属性,这会影响页面中的布局更改,只需使用transform属性,这不会影响页面流:

.option-box .inner .content:hover {
  -webkit-transform: scale(1.1);  /* Chrome, Opera 15+, Safari 3.1+ */
  -ms-transform: scale(1.1);  /* IE 9 */
  transform: scale(1.1);  /* Firefox 16+, IE 10+, Opera */
}

The resulting change should look like this:

生成的更改应如下所示: