我一直在研究使用模板的Angular插件。我的目标是在“loader-wrap”部分添加更多padding-top
,但是当我这样做时,第二个div称为“message-wrap”也会被修改并移动。
我需要将padding-top: 100px
添加到'loader-wrap'而不用向下移动'message-wrap'。我该如何解决这个问题?
基本结构HTML
<div id="page-wrap">
<section id="loader-wrap"></section>
<section id="message-wrap"></section>
</div>
CSS
gp-splash-loader #page-wrap {
z-index: 999;
position: fixed;
background: #FFFFFF;
width: 100%;
height: 80%;
top: 10%;
margin: 0 auto;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
transition: opacity .5s;
-webkit-backface-visibility: hidden;
}
@media ( max-height: 735px) {
gp-splash-loader #page-wrap.opened{
height: 100%;
top: 0;
};
}
gp-splash-loader #page-wrap.closed {
opacity: 0;
}
gp-splash-loader #page-wrap.opened {
opacity: 1;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
transition: opacity 0.5s;
}
gp-splash-loader #loader-wrap {
width: 30%;
height: 70%;
min-width: 300px;
max-width: 600px;
margin: 10px auto;
padding-top: 50px;
}
gp-splash-loader #message-wrap {
min-width: 1px;
margin: 0 auto;
height: 30%;
min-height: 30%;
}
gp-splash-loader #header-wrap {
display: inline-block;
}
签入codepen:http://codepen.io/gpincheiraa/pen/obdXEx
答案 0 :(得分:1)
这是交易。您无法使用填充向下移动该加载器,否则会影响该消息。你需要一个不同的解决方案试试下面的html / css。
基本上我将其设置为使得加载器和消息位于将居中的div中。然后在那个居中的div里面,你可以随心所欲。但是加载器和消息将位于中间
如果你只想让加载器居中,那么你可以从'loader-message-box'div中取出消息,并对它应用不同的样式。我会为这个解决方案做另一个小提琴
https://jsfiddle.net/ahmadabdul3/huf5zjkv/ - 消息和加载器都集中在
https://jsfiddle.net/ahmadabdul3/huf5zjkv/1/ - 此消息会将消息保留在底部
代码:
HTML
<div class='loader-message-box'>
<div class='loader-message'>
<div class='loader'>
</div>
<div class='message'>
Message
</div>
</div>
<div class='vertical-mid-hack'>
</div>
</div>
CSS
body, html {
height: 100%;
margin: 0;
}
.loader-message-box {
width: 100%;
height: 100%;
text-align: center;
}
.loader-message {
display: inline-block;
vertical-align: middle;
margin: 0 -2px;
}
.vertical-mid-hack {
display: inline-block;
vertical-align: middle;
margin: 0 -2px;
height: 100%;
}
.loader {
width: 100px;
height: 100px;
background-color: teal;
border-radius: 100px;
margin: 0 auto;
margin-bottom: 20px;
}
.message {
background-color: white;
border-radius: 3px;
font-family: arial;
padding: 20px 0;
margin: 0 auto;
margin-top: 20px:
}
答案 1 :(得分:0)
我从CSS中删除了gp-splash-loader
的任何实例。我不知道但我知道gp-splash-loader
不是有效的选择器。除此之外,以下CSS是重要的部分:
body {
margin: 0;
padding: 0;
background: slateblue;
text-align: center;
top: 0;
position: relative;
}
#loader-wrap {
width: 30%;
height: 70%;
min-width: 300px;
max-width: 600px;
margin: 10px auto;
padding-top: 100px;
position: relative;
z-index: 10;
}
#message-wrap {
min-width: 1px;
margin: 0 auto;
height: 30%;
min-height: 30%;
position: relative;
z-index: 11;
}
padding-top
relative
(以及身体)z-index
http://codepen.io/zer00ne/full/qbYMMQ/
顺便说一句,如果您想要向上或向下调整任何一部分,请添加top
,如果您希望该部分上升,则添加负值,反之亦然。恩。
#message-wrap {
min-width: 1px;
margin: 0 auto;
height: 30%;
min-height: 30%;
position: relative;
z-index: 11;
top: -100px;
}
这应该使#message-wrap
高出100px。