如何填充css3 / html5元素增长引起的空白区域？

时间：2015-09-15 15:00:54

标签： javascript jquery html5 css3 jquery-animate

我的页面中有一些圆圈，当鼠标击中一个元素时，它就会增长。 当我在左边的元素上做的时候一切都很好。 当我在右边的元素上做同样的事情时，我的div也会增长，然后在圆圈之间出现一个空的空白区域。

http://jsfiddle.net/u9pm7tLb/

有没有办法让圈子长大而不会推开其他圈子呢？

＆＃13;
＆＃13; 
.circleMonitoring {
    width: 70px;
    height: 70px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px; 
    border: 2px solid gray;
     margin: 3px;
     float: left;
     background-color: #00B70D;
     font-size: 10px;
     text-align: center;
     
      transition: all 1s;
     -moz-transition: all 1s; /* Firefox 4 */
    -webkit-transition: all 1s; /* Safari and Chrome */
     -o-transition: all 1s; /* Opera */
     -ms-transition: all 1s; /* IE9 (maybe) */

     
}
.insideCircle {
    margin-top: 10%;
    
}

.circleMonitoring:hover {
 width: 200px;
    height: 200px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%; 
     margin: 0px;
     float: left;
     background-color: red;
     color: white;

}
.circleMonitoring:hover i {
    font-size: 80px;
}
＆＃13; 
<div class="">
          <!-- /.row -->
          <div class="row">&nbsp;</div>
          <div class="row balls">
            <div class="col-sm-8">
                <div class="circleMonitoring">
                    <div class="insideCircle">
                        <i class="fa fa-laptop fa-2x"></i>
                    </div>
                </div>
                <div class="circleMonitoring">
                    <div class="insideCircle">
                        <i class="fa fa-laptop fa-2x"></i>                       
                    </div>
                   
                </div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                <div class="circleMonitoring"></div>
                                   
            </div>
            
          </div>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

您可以将圈子包裹在position: relative;的div中并给圈子position: absolute：

JS Fiddle

HTML 

<div class="wrap">
    <div class="circleMonitoring"></div>
</div>

CSS 

.wrap {
    position: relative;
    width: 70px;
    height: 70px;
    float: left;
    margin: 3px;
}
.circleMonitoring {
    position: absolute;
    width: 70px;
    height: 70px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    border: 2px solid gray;
    background-color: #00B70D;
    font-size: 10px;
    text-align: center;
    transition: all 1s;
    -moz-transition: all 1s;
    /* Firefox 4 */
    -webkit-transition: all 1s;
    /* Safari and Chrome */
    -o-transition: all 1s;
    /* Opera */
    -ms-transition: all 1s;
    /* IE9 (maybe) */
}

.circleMonitoring:hover {
    z-index: 99999;
    width: 200px;
    height: 200px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    margin: 0px;
    float: left;
    background-color: red;
    color: white;
}

另一种可能性是使用transform: scale()而不是更改高度/宽度来实现相同的效果：

JS Fiddle 

.circleMonitoring {
    transform: scale(1);
    width: 70px;
    height: 70px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px; 
    border: 2px solid gray;
     margin: 3px;
     float: left;
     background-color: #00B70D;
     font-size: 10px;
     text-align: center;
     position: relative;
      transition: all 1s;
     -moz-transition: all 1s; /* Firefox 4 */
    -webkit-transition: all 1s; /* Safari and Chrome */
     -o-transition: all 1s; /* Opera */
     -ms-transition: all 1s; /* IE9 (maybe) */


}
.insideCircle {
    margin-top: 10%;

}

.circleMonitoring:hover {
    transform: scale(3);
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%; 
     margin: 0px;
     float: left;
     background-color: red;
     color: white;
    z-index: 999999;

}
相关问题
最新问题