如何填充css3/html5元素增长导致的空白？答案

【问题标题】：How to fill an empty space caused by the growth of an css3/html5 element?如何填充css3/html5元素增长导致的空白？
【发布时间】：2015-09-15 23:17:49
【问题描述】：

我的页面中有一些圆圈，当鼠标点击某个元素时，它会变大。当我对左侧的元素执行此操作时，一切都很好。当我在右边的元素上做同样的事情时，我的 div 也会增长，然后在圆圈之间出现一个空白区域。

http://jsfiddle.net/u9pm7tLb/

有没有一种方法可以在不推开其他圈子的情况下扩大圈子？

.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;
}

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

【问题讨论】：

标签： javascript jquery html css jquery-animate

【解决方案1】：

您可以使用 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;

}

【讨论】：