在我的网页中,我想在时钟和文本之间保持固定的距离。
这是我希望它看起来的样子:
当我减小选项卡的大小时(网页宽度方向),会发生这种情况:
我希望同样适用于更大的屏幕,但目前这适用于更大的屏幕。
在 850 像素以下,我使用的媒体查询工作正常,但如果有更有效的方法,请告诉我。
main.html
<div id = "main">
<div id="clock"></div>
<div id = "text">
<div id = "greetDIV"><h1 id = "greet">Hello,''.</h1></div>
<div id = "quoteDIV">
<h2 id = "quote">quote</h2>
<h2 id = "by" style="display:none;">- <a href = "" id = "byLink">by</a></h2>
</div>
</div>
</div>
main.css
#quoteDIV{
margin-top: 5%;
}
#quote{
text-align: center;
color:white;
/*opacity: 0.9;*/
font-family: 'Titillium Web', sans-serif;
font-size: 21px;
}
#by{
text-align: center;
color: white;
/*opacity: 0.9;*/
font-family: 'Titillium Web', sans-serif;
font-size: 21px;
margin-top:-13px;
}
#greet{
color: white;
text-align: center;
font-size: 60px;
margin-top: 32%; /*PROBLEM!*/
/*opacity: 0.9;*/
font-family: 'Titillium Web', sans-serif;
}
#clock {
width: 5em;
height: 1.3em;
border-radius: 1em;
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
margin: auto;
font-family: 'Titillium Web', sans-serif;
text-align: center;
font-size: 118px;
color: white;
/*opacity: 0.95;*/
line-height: 1.2em;
background: transparent;
vertical-align: middle;
}
@media only screen and (min-width: 700px) and (max-width: 1000px){
#clock{
font-size: 100px;
}
}
@media only screen and (min-width: 500px) and (max-width: 699px){
#clock{
font-size: 80px;
}
}
@media only screen and (min-width: 200px) and (max-width: 499px){
#clock{
font-size: 50px;
}
}
@media screen and (max-width: 850px) {
#greet{
font-size: 33px;
margin-top: 380px;
}
#quoteDIV{
margin-top: 40px;
}
/*.content
{
margin-left: 60px;
float: center;
}*/
}
最佳答案
https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top
margin-top(百分比)是根据容器的宽度计算的。因此,如果您调整屏幕宽度,边距将会改变。
如果无法获得固定的像素数量,请尝试根据视口(viewport)高度 (vh) 或字体大小 (em/rem) 来表示边距。
关于html - "margin-top"在 css 中不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37607964/