Question

我刚刚使用bootstrap和css 2d进行了布局，

please follow [this link to see]

（http://codepen.io/geesonC/pen/xGYJrQ）

问题是当我将第一行的最后一项悬停时，第二行的前两项将移至第三行。

我无法解决，请给我建议。

CSS代码

<style>
.margintop-300{
    margin-top:-300px;
}

.rotate-imgs{
    padding:24px;
    margin-top:20px;
    margin-bottom:60px;
    text-align:center;
}

.rotate-imgs:hover >.rotate-img{
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}

.rotate-imgs:hover >.rotate-img-bg1{
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    border:0;
}

.rotate-imgs:hover >.rotate-img-bg2{
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    border:0;
}

.rotate-img{
    padding:0;
    text-align:center;
    -webkit-transform: rotate(-1deg);
    -moz-transform: rotate(-1deg);
    -o-transform: rotate(-1deg);
    transform: rotate(-1deg);

    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out;

    z-index:1012;
}

.rotate-img-bg1{
    padding:0;  
    text-align:center;
    border:1px solid #dddddd;
    -webkit-transform: rotate(6deg);
    -moz-transform: rotate(6deg);
    -o-transform: rotate(6deg);
    transform: rotate(6deg);

    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out;
    z-index:1011;
}

.rotate-img-bg2{
    padding:0;  
    text-align:center;
    border:1px solid #dddddd;
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    transform: rotate(10deg);

    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out;
    z-index:1010;
}

HTML代码

<div class="container">
<div class="row">
     <div class="col-md-4 col-sm-6">
         <div class="rotate-imgs">
            <div class="rotate-img-bg1"><img src=""></div>
            <div class="rotate-img-bg2 margintop-300"><img src=""></div>
            <div class="rotate-img margintop-300"><img src=""></div>
         </div>
     </div>
     ...
     <div class="col-md-4 col-sm-6">
         <div class="rotate-imgs">
            <div class="rotate-img-bg1"><img src=""></div>
            <div class="rotate-img-bg2 margintop-300"><img src=""></div>
            <div class="rotate-img margintop-300"><img src=""></div>
         </div>
     </div>
   </div>
  </div>

谢谢！

Answer 1

CSS边框属性（如.rotate-img-bg1和.rotate-img-bg2）是从元素开始的，这意味着它们会影响页面布局。一个快速的解决方案是，而不是在这些元素上使用border: none;，而是使用border: 1px solid transparent;。

Codepen：http://codepen.io/maxlaumeister/pen/MwQBQQ

将第一行的最后一项悬停，第二行的前两项移动

1 个答案: