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

Question

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

正如您可以看到，当您悬停扩展效果时，div行会移动到位。自从我将图像添加到中心以来，这种情况才刚刚开始。

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

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

这是基本代码;

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

这就是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%;
}

Answer 1

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

不是通过width和height属性设置动画，而是影响页面中的布局更改，只需使用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 */
}

结果更改应如下所示：

Answer 2

这是float: left胜过display: inline-block的情况。您正在使用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>

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