如何停止移動位置的動畫divs

Question

我在此頁面上有div div內的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

這是一種情況，其中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很好地工作。

Answer 2

當動畫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 */ 
} 

產生的變化應該是這樣的：