Question

以下是有问题的html

默认情况下显示为：
enter image description here

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

这个盒子的目的是让它看起来像一个“加载”框，经过一段时间（已经包含在我的主要代码中），它一旦加载就消失了，所以目前唯一的问题是它看起来很丑，并且没有正确布局:(

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

如果有人看到我想要使用的完全不同的加载消息/栏/弹出窗口，请随时发布。

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

由于

Answer 1

加载框内的任何内容都不需要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)
    }
}

Answer 2

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

你需要看看你的定位。你将它们中的3个设置为固定，左边= 50％，顶部= 10％。

由于这个原因，他们都会坐在页面的同一个地方。

看看W3School它在那里解释了一切，你可以搞得一团糟：）

Answer 3

您已将它们设置为固定为left: 50%; top: 10%;

尝试更改

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

要：

.loading1 a {
  position: relative;
  cursor: pointer;
  left: 5%;
  color: white;
  padding-left: 5px;
}

.loading2 a {
  position: relative;
  cursor: pointer;
  left: 5%;
  color: white;
  padding-left: 5px;
}

更新了小提琴here。在这个小提琴中，我删除了你的<br>。这是两个不同的div，所以已经有了休息。

如何修复浮动html div的布局和大小？

3 个答案: