html - 如何修复 float html div 的布局和大小？-6ren

html - 如何修复 float html div 的布局和大小？

转载作者：太空狗更新时间：2023-10-29 15:27:05

下面是有问题的html

默认显示为:
enter image description here

这是完全错误的，它应该在两行上，它也应该看起来“漂亮”，但现在看起来很丑。

这个盒子的目的是让它看起来像一个“正在加载”的盒子，在加载后(已经合并到我的主要代码中)它会在加载后消失，所以目前唯一的问题是它看起来很丑而且布局不正确:(

我在主 div 中有两个 div block 的原因是因为它们将是不同大小和颜色的文本(我认为)

如果有人认为我愿意使用外观完全不同的加载消息/栏/弹出窗口，请随时发布。

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style type="text/css">
            .loading1 a {
            position: fixed;
            cursor: pointer;
            left: 50%;
            top: 10%;
            color: white;
            padding-left: 5px;
            }

            .loading2 a {
            position: fixed;
            cursor: pointer;
            left: 50%;
            top: 10%;
            color: white;
            padding-left: 5px;
            }

            .loading {
            z-index: 999;
            position: fixed;
            left: 50%;
            top: 10%;
            width: 150px;
            height: 80px;
            border: 1px solid white;
            -moz-border-radius: 10px;
            border-radius: 10px;
            background: #D8B93F;
            }

            #circularG{
            position:relative;
            width:25px;
            height:25px}

            .circularG{
            position:absolute;
            background-color:#0E4216;
            width:6px;
            height:6px;
            -moz-border-radius:4px;
            -moz-animation-name:bounce_circularG;
            -moz-animation-duration:1.12s;
            -moz-animation-iteration-count:infinite;
            -moz-animation-direction:linear;
            -webkit-border-radius:4px;
            -webkit-animation-name:bounce_circularG;
            -webkit-animation-duration:1.12s;
            -webkit-animation-iteration-count:infinite;
            -webkit-animation-direction:linear;
            -o-border-radius:4px;
            -o-animation-name:bounce_circularG;
            -o-animation-duration:1.12s;
            -o-animation-iteration-count:infinite;
            -o-animation-direction:linear;
            -ms-border-radius:4px;
            -ms-animation-name:bounce_circularG;
            -ms-animation-duration:1.12s;
            -ms-animation-iteration-count:infinite;
            -ms-animation-direction:linear;
            }

            #circularG_1{
            left:0;
            top:10px;
            -moz-animation-delay:0.42s;
            -webkit-animation-delay:0.42s;
            -o-animation-delay:0.42s;
            -ms-animation-delay:0.42s;
            }

            #circularG_2{
            left:3px;
            top:3px;
            -moz-animation-delay:0.56s;
            -webkit-animation-delay:0.56s;
            -o-animation-delay:0.56s;
            -ms-animation-delay:0.56s;
            }

            #circularG_3{
            top:0;
            left:10px;
            -moz-animation-delay:0.7s;
            -webkit-animation-delay:0.7s;
            -o-animation-delay:0.7s;
            -ms-animation-delay:0.7s;
            }

            #circularG_4{
            right:3px;
            top:3px;
            -moz-animation-delay:0.84s;
            -webkit-animation-delay:0.84s;
            -o-animation-delay:0.84s;
            -ms-animation-delay:0.84s;
            }

            #circularG_5{
            right:0;
            top:10px;
            -moz-animation-delay:0.98s;
            -webkit-animation-delay:0.98s;
            -o-animation-delay:0.98s;
            -ms-animation-delay:0.98s;
            }

            #circularG_6{
            right:3px;
            bottom:3px;
            -moz-animation-delay:1.12s;
            -webkit-animation-delay:1.12s;
            -o-animation-delay:1.12s;
            -ms-animation-delay:1.12s;
            }

            #circularG_7{
            left:10px;
            bottom:0;
            -moz-animation-delay:1.26s;
            -webkit-animation-delay:1.26s;
            -o-animation-delay:1.26s;
            -ms-animation-delay:1.26s;
            }

            #circularG_8{
            left:3px;
            bottom:3px;
            -moz-animation-delay:1.4s;
            -webkit-animation-delay:1.4s;
            -o-animation-delay:1.4s;
            -ms-animation-delay:1.4s;
            }

            @-moz-keyframes bounce_circularG{
            0%{
            -moz-transform:scale(1)}

            100%{
            -moz-transform:scale(.3)}

            }

            @-webkit-keyframes bounce_circularG{
            0%{
            -webkit-transform:scale(1)}

            100%{
            -webkit-transform:scale(.3)}

            }

            @-o-keyframes bounce_circularG{
            0%{
            -o-transform:scale(1)}

            100%{
            -o-transform:scale(.3)}

            }

            @-ms-keyframes bounce_circularG{
            0%{
            -ms-transform:scale(1)}

            100%{
            -ms-transform:scale(.3)}

            }
        </style>
    </head>
    <body>
        <div class="loading"><div id="circularG">
            <div id="circularG_1" class="circularG">
            </div>
            <div id="circularG_2" class="circularG">
            </div>
            <div id="circularG_3" class="circularG">
            </div>
            <div id="circularG_4" class="circularG">
            </div>
            <div id="circularG_5" class="circularG">
            </div>
            <div id="circularG_6" class="circularG">
            </div>
            <div id="circularG_7" class="circularG">
            </div>
            <div id="circularG_8" class="circularG">
            </div>
        </div>
        <div class="loading1"><a>Loading, Please Wait...</a></div><div class="loading2"><br><a>(click to abort)</a></div></div>
    </body>
</html>

谢谢

最佳答案

加载框内的任何内容都不需要 position:fixed、top 和 left。我还对定位和间距做了一些更改。希望你喜欢!

http://jsfiddle.net/myajouri/9eZNQ/

HTML

<div class="loading">
    <div id="circularG">
        <div id="circularG_1" class="circularG"></div>
        <div id="circularG_2" class="circularG"></div>
        <div id="circularG_3" class="circularG"></div>
        <div id="circularG_4" class="circularG"></div>
        <div id="circularG_5" class="circularG"></div>
        <div id="circularG_6" class="circularG"></div>
        <div id="circularG_7" class="circularG"></div>
        <div id="circularG_8" class="circularG"></div>
    </div>
    <div class="loadingText">
        Loading, Please Wait... 
        <a href="#">(click to abort)</a>
    </div>
</div>

CSS

.loadingText {
    color: white;
    font-family: sans-serif;
    font-size: 16px;
}
.loadingText a {
    line-height: 32px;
    color: inherit;
    font-size: 14px;
    text-decoration: none;
}
.loading {
    z-index: 999;
    position: fixed;
    left: 50%;
    top: 50%;
    width: 170px;
    height: 90px;
    margin-left: -95px;
    margin-top: -55px;
    padding: 10px;
    border: 1px solid white;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.75);
    text-align: center;
}
#circularG {
    position:relative;
    width:25px;
    height:25px;
    margin: 5px auto 15px auto;
}
.circularG {
    position:absolute;
    background-color: white;
    width:6px;
    height:6px;
    -moz-border-radius:4px;
    -moz-animation-name:bounce_circularG;
    -moz-animation-duration:1.12s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-direction:linear;
    -webkit-border-radius:4px;
    -webkit-animation-name:bounce_circularG;
    -webkit-animation-duration:1.12s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:linear;
    -o-border-radius:4px;
    -o-animation-name:bounce_circularG;
    -o-animation-duration:1.12s;
    -o-animation-iteration-count:infinite;
    -o-animation-direction:linear;
    -ms-border-radius:4px;
    -ms-animation-name:bounce_circularG;
    -ms-animation-duration:1.12s;
    -ms-animation-iteration-count:infinite;
    -ms-animation-direction:linear;
}
#circularG_1 {
    left:0;
    top:10px;
    -moz-animation-delay:0.42s;
    -webkit-animation-delay:0.42s;
    -o-animation-delay:0.42s;
    -ms-animation-delay:0.42s;
}
#circularG_2 {
    left:3px;
    top:3px;
    -moz-animation-delay:0.56s;
    -webkit-animation-delay:0.56s;
    -o-animation-delay:0.56s;
    -ms-animation-delay:0.56s;
}
#circularG_3 {
    top:0;
    left:10px;
    -moz-animation-delay:0.7s;
    -webkit-animation-delay:0.7s;
    -o-animation-delay:0.7s;
    -ms-animation-delay:0.7s;
}
#circularG_4 {
    right:3px;
    top:3px;
    -moz-animation-delay:0.84s;
    -webkit-animation-delay:0.84s;
    -o-animation-delay:0.84s;
    -ms-animation-delay:0.84s;
}
#circularG_5 {
    right:0;
    top:10px;
    -moz-animation-delay:0.98s;
    -webkit-animation-delay:0.98s;
    -o-animation-delay:0.98s;
    -ms-animation-delay:0.98s;
}
#circularG_6 {
    right:3px;
    bottom:3px;
    -moz-animation-delay:1.12s;
    -webkit-animation-delay:1.12s;
    -o-animation-delay:1.12s;
    -ms-animation-delay:1.12s;
}
#circularG_7 {
    left:10px;
    bottom:0;
    -moz-animation-delay:1.26s;
    -webkit-animation-delay:1.26s;
    -o-animation-delay:1.26s;
    -ms-animation-delay:1.26s;
}
#circularG_8 {
    left:3px;
    bottom:3px;
    -moz-animation-delay:1.4s;
    -webkit-animation-delay:1.4s;
    -o-animation-delay:1.4s;
    -ms-animation-delay:1.4s;
}
@-moz-keyframes bounce_circularG {
    0% {
        -moz-transform:scale(1)
    }
    100% {
        -moz-transform:scale(.3)
    }
}
@-webkit-keyframes bounce_circularG {
    0% {
        -webkit-transform:scale(1)
    }
    100% {
        -webkit-transform:scale(.3)
    }
}
@-o-keyframes bounce_circularG {
    0% {
        -o-transform:scale(1)
    }
    100% {
        -o-transform:scale(.3)
    }
}
@-ms-keyframes bounce_circularG {
    0% {
        -ms-transform:scale(1)
    }
    100% {
        -ms-transform:scale(.3)
    }
}

关于html - 如何修复 float html div 的布局和大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20403091/

文章推荐：单个套接字可以用于 C 中的全双工通信吗？

文章推荐： c - 双维数组作为返回值

文章推荐： c - 使用多个排序条件对数组进行排序(快速排序)

c - 大小(数组)/大小(整数)
这个问题在这里已经有了答案: C sizeof a passed array [duplicate] (7 个回答) 8年前关闭。在一个函数中，我声明了一个数组: int char_count_ar
linux - 为什么文件系统有自己的 block 大小，而不是使用硬盘 block 大小？
简而言之，文件系统如何与 block 设备通信？最佳答案我对 block 大小不太了解。我认为 ext4(Linux)的文件系统的 block 大小是 4KB，考虑到现代处理器的页面大小(4KB)
mysql - tinyint(大小)，varchar(大小): "size" explaination
我知道 tinyint(1) 和 tinyint(2) 具有相同的存储空间范围。唯一的区别是显示宽度不同。这是否意味着 tinyint(1) 将存储所有类型的整数但只正确显示 0 到 9 的范围？而
c++ - 大小 8 的无效读取，大小 8 的无效写入 (Valgrind)
今晚我已经研究了以下代码几个小时，但我只是摸不着头脑。当使用函数从标准输入填充数组时，我不断收到“大小 8 的无效写入”和“大小 8 的无效读取”。如有任何帮助，我们将不胜感激...我知道 Sta
c - 大小 8 的无效读取，大小 8 的无效写入，C
我有一个 valgrind 错误，我不知道如何摆脱它们: ==5685== Invalid read of size 8 ==5685== at 0x4008A1: main (in /home
Hadoop block 大小 vs 拆分 vs block 大小
我对 Hadoop 的概念有点困惑。 Hadoop block 大小、拆分大小和 block 大小之间有什么区别？提前致谢。最佳答案 block 大小和 block 大小相同。拆分大小可能与
javascript - 超过 localStorage 配额(localStorage 大小!= 文件下载大小)& 如何检查 localStorage 大小
我想不出一个好的标题，所以希望可以。我正在做的是创建一个离线 HTML5 webapp。 “出于某些原因”我不希望将某些文件放在缓存 list 中，而是希望将内容放在 localStorage 中。
xamarin - 减少 Xamarin.Forms 中的 APK 大小，APK 大小 80MB
无法将 xamarin apk 大小减少到 80 MB 以下，已执行以下操作: 启用混淆器配置:发布平台:事件(任何 CPU)。启用 Multi-Dex:true 启用开发人员检测(调试和分析)
python - 读取多个 csv 文件(大小 mxm)并加载为 n 维数组(大小 nxmxm)(不连接)
我正在开发一个程序，需要将大量 csv 文件(数千个)加载到数组中。 csv 文件的尺寸为 45x100，我想创建一个尺寸为 nx45x100 的 3-d 数组。目前，我使用 pd.read_csv(
react-native - Flutter apk/ipa 大小 vs React Native apk/ipa 大小
Hello World 示例的 React Native APK 大小约为 20M (in recent versions)，因为支持不同的硬件架构(ARMv7、ARMv8、X86 等)，而同一应用程
python - 将 n 个元素(大小 = 2 字节，十进制)的列表拆分为 2n 个元素(大小 = 1 字节，十六进制)
我有一个包含 n 个十进制元素的列表，其中每个元素都是两个字节长。可以说: x = [9000 , 5000 , 2000 , 400] 这个想法是将每个元素拆分为 MSB 和 LSB 并将其存储在
GtkTextView 大小
如何设置 GtKTextView 的大小？我想我不能使用 gtk_widget_set_usize。最佳答案您不能直接控制小部件的大小，而是由其容器完成。您可以使用 gtk_widget_set_
具有函数的结构的c++大小
这个问题在这里已经有了答案: c++ sizeof() of a class with functions (7 个答案) 关闭 5 年前。结果是 12。 foobar 函数存储在内存中的什么位置
image - 为什么图像序列比源视频大(大小)？
当我在 ffmpeg(或任何其他程序)中使用这样的命令时: ffmpeg -i input.mp4 image%d.jpg 所有图像的组合文件大小总是比视频本身大。我尝试减少每秒帧数、降低压缩设置、模
clojurescript 高级编译 - 大小
我是 clojurescript 的新手。高级编译后出现“77 KB”的javascript文件是否正常？我有一个 clojurescript 文件: 我正在使用 leinigen: lein c
Qt QPixmap 大小
我想要一个 QPixmap尺寸为 50 x 50。我试过 : QPixmap watermark(QSize(50,50)); watermark.load(":/icoMenu/preparati
卷积层的 tensorflow 大小
我正在尝试从一篇研究论文中重新创建一个 cnn，但我对深度学习还是个新手。我得到了一个大小为 32x32x7 的 3d 补丁。我首先想执行一个大小为 3x3 的卷积，具有 32 个特征和步幅为 2。
iPhone如何在旋转设备时正确调整 View 大小
我一直在尝试调整 View Controller 内的 View 大小，但到目前为止没有运气。基本上，我的 View 最底部有一个按钮，当方向从纵向更改为横向时，该按钮不再可见，因为它现在太靠下了。
javascript - 上传前检查图像尺寸/大小
如何使用此功能检查图像的尺寸？我只是想在上传之前检查一下... $("#LINK_UPLOAD_PHOTO").submit(function () { var form = $(this);
二叉搜索树上的 JavaScript 大小
我用 C++ 完成了这个，因为你可以通过引用传递参数。我无法弄清楚如何在 JavaScript 中执行此操作。我的代码需要更改什么？我的输出是1 this.sizeOfBst = function()

太空狗

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 如何修复 float html div 的布局和大小？