Fatal编程技术网
  • html/
  • 如何修复浮动html div的布局和大小？

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

html css

如何修复浮动html div的布局和大小？,html,css,Html,Css,下面是讨论中的html 默认情况下，它显示为： 这是完全错误的，它应该在两行上，它也应该看起来“漂亮”，但它现在看起来很难看 该框的目的是使其看起来像一个“加载”框，经过一段时间（已经包含在我的主要代码中）加载后，它会消失，因此目前唯一的问题是它看起来很丑，布局不正确：( 我之所以在主div中有两个div块，是因为它们将是不同大小和颜色的文本（我认为） 如果任何人有一个完全不同的外观加载消息/酒吧/弹出窗口，他们认为我想使用，请随时张贴 <html xmlns="http://www.w

下面是讨论中的html

默认情况下，它显示为：

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

该框的目的是使其看起来像一个“加载”框，经过一段时间（已经包含在我的主要代码中）加载后，它会消失，因此目前唯一的问题是它看起来很丑，布局不正确：(

我之所以在主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>


.加载1 a{
位置：固定；
光标：指针；
左：50%；
排名前10%；
颜色：白色；
左侧填充：5px；
}
.加载2 a{
位置：固定；
光标：指针；
左：50%；
排名前10%；
颜色：白色；
左侧填充：5px；
}
.装货{
z指数：999；
位置：固定；
左：50%；
排名前10%；
宽度：150px；
高度：80px；
边框：1px纯白；
-moz边界半径：10px；
边界半径：10px；
背景#D8B93F；
}
#循环{
位置：相对位置；
宽度：25px；
高度：25px}
A.circularG{
位置：绝对位置；
背景色：#0E4216；
宽度：6px；
高度：6px；
-moz边界半径：4px；
-moz动画名称：bounce_circularG；
-moz动画持续时间：1.12s；
-moz动画迭代次数：无限；
-moz动画方向：线性；
-webkit边界半径：4px；
-webkit动画名称：bounce_circularG；
-webkit动画持续时间：1.12s；
-webkit动画迭代计数：无限；
-webkit动画方向：线性；
-o-边界半径：4px；
-o-动画名称：bounce_circularG；
-o-动画持续时间：1.12s；
-o-动画-迭代-计数：无限；
-o方向：线性；
-ms边界半径：4px；
-ms动画名称：bounce_circularG；
-ms动画持续时间：1.12s；
-ms动画迭代次数：无限；
-ms动画方向：线性；
}
#循环1{
左：0；
顶部：10px；
-moz动画延迟：0.42s；
-webkit动画延迟：0.42s；
-o-动画延迟：0.42s；
-ms动画延迟：0.42s；
}
#循环2{
左：3px；
顶部：3px；
-moz动画延迟：0.56s；
-webkit动画延迟：0.56s；
-o-动画延迟：0.56s；
-ms动画延迟：0.56s；
}
#循环3{
排名：0；
左：10px；
-moz动画延迟：0.7s；
-webkit动画延迟：0.7s；
-o-动画延迟：0.7s；
-ms动画延迟：0.7s；
}
#循环4{
右：3px；
顶部：3px；
-moz动画延迟：0.84s；
-webkit动画延迟：0.84s；
-o-动画延迟：0.84s；
-ms动画延迟：0.84s；
}
#循环5{
右：0；
顶部：10px；
-moz动画延迟：0.98s；
-webkit动画延迟：0.98s；
-o-动画延迟：0.98s；
-ms动画延迟：0.98s；
}
#循环6{
右：3px；
底部：3px；
-moz动画延迟：1.12s；
-webkit动画延迟：1.12s；
-o-动画延迟：1.12s；
-ms动画延迟：1.12s；
}
#第7号通告{
左：10px；
底部：0；
-moz动画延迟：1.26s；
-webkit动画延迟：1.26秒；
-o-动画延迟：1.26s；
-毫秒动画延迟：1.26秒；
}
#循环8{
左：3px；
底部：3px；
-moz动画延迟：1.4s；
-webkit动画延迟：1.4s；
-o-动画-延迟：1.4s；
-ms动画延迟：1.4s；
}
@-moz关键帧反弹\u循环{
0%{
-moz变换：比例（1）}
100%{
-moz变换：缩放（.3）}
}
@-webkit关键帧反弹\u循环{
0%{
-webkit变换：缩放（1）}
100%{
-webkit变换：缩放（.3）}
}
@-o-关键帧反弹\u循环{
0%{
-o-变换：标度（1）}
100%{
-o变换：缩放（.3）}
}
@-ms关键帧反弹\u循环{
0%{
-ms变换：比例（1）}
100%{
-ms变换：缩放（.3）}
}
正在加载，请稍候…
（单击以中止）
谢谢

你需要看一看你的位置。s你把三个都设置为固定，左=50%，顶=10%

因此，他们都将坐在页面上的同一位置

看一看，里面解释了这一切，你可能会弄得一团糟：）

你将它们设置为固定到
左侧：50%；最高：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;
            }

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



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



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



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