javascript - 一个css3/html5元素增长导致的空白如何填充？-6ren

javascript - 一个css3/html5元素增长导致的空白如何填充？

转载作者：行者123 更新时间：2023-11-28 07:11:52

我的页面中有一些圆圈，当鼠标点击某个元素时它会变大。当我对左侧的元素执行此操作时，一切都很好。当我对右侧的元素执行相同操作时，我的 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>

最佳答案

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

}

关于javascript - 一个css3/html5元素增长导致的空白如何填充？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32589383/

文章推荐： c++ - 使用 Boost 统一生成随机实数

文章推荐： ios - Xcode swift Segue 动画停止工作

文章推荐： javascript - React组件继承和ajax调用

文章推荐： swift - 创建自定义 UIKeyboard 应用内

javascript - 如果
增长，则让
增长
当我输入内容时，如何移动 p 段落下方的所有元素，即 contenteditable。这是我的代码: body, html { margin: 0; padding: 0; backgr
javascript - 当内部 div 增长/收缩时使外部 div 增长/收缩但在它们之间保持边距
我要解决的问题: 我有一个包含 div 的外部 div。 content 内部和外部 div 之间的边距应始终相同。当内部 div 增长/收缩时，外部 div
c - 结构末尾的填充物用于 future 增长
这document Ulrich Drepper 称为“图书馆设计、实现和维护的良好实践”(第 5 页底部): [...] the type definition should always crea
qt - QPainterPath 增长/扩展
有什么方法可以获取 QPainterPath 并将其展开，就像 Photoshop 中的“选择”>“增长...”(或“展开...”)命令一样？我想获取从 QGraphicsItem::shape 返
c - 增长(和收缩)内存池
假设，为了问题的目的，我们有一个内存池，最初分配了 n 个 block 。但是，当达到容量时，池想要增长并变成原来大小的两倍 (2n)。现在可以使用 C 中的 realloc 完成此调整大小操作，但
c - 增长(和收缩)内存池
假设，为了问题的目的，我们有一个内存池，最初分配了 n 个 block 。但是，当达到容量时，池想要增长并变成原来大小的两倍 (2n)。现在可以使用 C 中的 realloc 完成此调整大小操作，但
c++ - 增长 managed_shared_memory 段后出现段错误
我正在研究 boost 库的共享内存部分，为更大的项目做准备。我需要一个共享内存段，在初始化时我不一定知道它的大小，所以我的计划是增加这个段。我的初始实现有一个存储在共享内存中的 boost::in
css - 阻止 FlexChild 增长
这个问题在这里已经有了答案: How to disable equal height columns in Flexbox? (4 个答案) What are the differences bet
javascript - 防止表从长 td 增长
我有一个包含子表的表。我不希望子表影响表格的宽度——在溢出的情况下，我希望两者独立滚动。此外，由于子表是基于切换显示的，所以我不希望主表行根据子表是否可见而跳转 Here's代码笔。我想我可以用 t
html - 防止带有进度条的 flexbox 增长
我有一个带栏的页面设计，它可以有一个、两个或三个栏。这些列的大小应相同。为此我使用了 flexbox，它很好，允许我添加/删除我的列并让浏览器处理列宽的大小调整。现在，当列中的文本大于列的宽度时，
python - 增长 numpy 数值数组的最快方法
要求: 我需要根据数据增长一个任意大的数组。我可以猜测大小(大约 100-200)，但不能保证数组每次都能适合一旦它增长到最终大小，我需要对其执行数值计算，因此我更愿意最终得到一个二维 numpy
python - 增长 numpy 数组
我有一个 3x256 规则的规则集。每个规则映射到一个 3x3 的值网格，这些值本身就是规则。规则示例: 0 -> [[0,0,0],[0,1,0],[0,0,0]] 1 -> [[1,1,1],
html - 了解 flex 增长
我有 3 个 div，如果我给前两个 div flex: 0.5，如果我给了 flex-wrap: wrap，最后一个 div 应该移动到下一行>。如果我错了，请指正。以下是我的 html/css:
css - 如何使用 flex 增长？
在文档和 Bootstrap v4 问题中 (here) ，我看不到任何支持 flex-grow 的计划，例如语法如下: I use all the space lef
python - 增长 numpy 数值数组的最快方法
要求: 我需要从数据中增加一个任意大的数组。我可以猜测大小(大约 100-200)，但不能保证每次都适合数组一旦它增长到最终大小，我需要对其执行数值计算，因此我希望最终得到一个二维 numpy 数
arrays - 增长 slice 时扩展内存(逻辑增长基础阵列的容量)
我知道(并在互联网上阅读-包括此资源)。增加内存的逻辑是:如果len数组小于1024-golang将array乘以2，否则将len乘以1.25(并且我们在源代码中看到了这个问题https://gith
c# - 如何阻止 WPF TextBox 增长
当输入长文本时，WPF TextBox 控件会增长。这个问题已经在 Stackoverflow 中提出了我也引用了一些答案，但我仍然没有找到有效的正确答案。 Here提到了同样的问题，但没有针对此
java - Vaadin 13 Flex 增长
我在使用 Vaadin HorizonalLayout 时遇到问题 - 我希望左侧组件填充大部分水平空间，如 Fiddle 所示但是，当我运行 Vaadin 应用程序时，这两个组件会平分屏幕。
jquery - HTML - 增长/过渡图像/颜色以填充整个网页
关于这个fiddle , 当我点击 a href在这种情况下这是一个图像，我希望图像从 div 开始增长/过渡以通过过渡/缩放填充整个页面它被放置在其中。如果这不可能，我想用 div 的背景颜色填充页
javascript - 滚动、增长、缩小、随机放置图像选取框？
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 6 年前。 Improve this q

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 一个css3/html5元素增长导致的空白如何填充？