调整包含元素的div以适应不同的分辨率
调整包含元素的div以适应不同的分辨率
提问于 2015-04-08 18:00:51
我有一个div，这是一个酒吧，应该始终停留在屏幕的顶部。它显示分数和你有多少生命(每一个都是一个画布)。我需要的分数和生活总是在同一个位置，尽管不同的屏幕分辨率。
HTML：
<div class='upperbar'>
<h1 id="scoreword">SCORE: number</h1>
<div class="lives">
<canvas id="life1" width="100" height="100"></canvas>
<canvas id="life2" width="100" height="100"></canvas>
<canvas id="life3" width="100" height="100"></canvas>
</div>
</div>CSS：
.upperbar {
display: flex;
height: 8.5%;
width: 100%;
background: rgba(0, 0, 0, .2);
}
#scoreword {
position: absolute;
opacity: 1;
font-size: 1.8em;
text-align: left;
position: relative;
top: 50%;
left: 2%;
}
.lives {
position: relative;
right: 0;
}我对此很困惑。我该怎么做呢？
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-04-08 18:26:53
同样的想法与弹性和正当性内容:空间之间；
http://jsfiddle.net/bestiole/tjg09mbt/
.upperbar {
display: flex;
justify-content:space-between;
height: 8.5%;
width: 100%;
background: rgba(0, 0, 0, .2);
}
#scoreword {
font-size: 1.8em;
margin:0;
background:#f00;
}
.lives {
background:#ff0;
}您的代码缺少关闭的div。
Stack Overflow用户
发布于 2015-04-08 18:09:55
您在包装器div中使用display:flex，但在子div中没有应用任何flex规则。
在这里查看我对css的更改：http://jsfiddle.net/7ns1epa5/
.upperbar {
display: flex;
height: 8.5%;
width: 100%;
background: rgba(0, 0, 0, .2);
}
#scoreword {
opacity: 1;
font-size: 1.8em;
text-align: left;
top: 50%;
background-color:orange;
flex:1;
}
.lives {
background-color:red;
flex:1;
}flex:1在两个子div上都写着“使用50%的父flex包装器”。它背后的数学是，“把每个儿童div的总挠度加起来作为分母，然后取他们的挠度数作为分子”--所以两个带flex:1的儿童div是1+1=2，每个div是1/2或50%“如果您将一个儿童div改为flex:2，它将是1+2=3，div将是1/3和2/3。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29522039
复制相关文章
相似问题
腾讯云开发者
