Question

我有一个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;
}

我对此很困惑。我该怎么办？

Answer 1

你在你的包装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：两个子div上的1表示“使用50％的父Flex包装器”。它背后的数学是，“将每个子div的总弹性加起来作为分母，然后将它们的弹性数作为分子” - 所以两个带有flex的子div：1将是1 + 1 = 2，每个div将是1/2或50％“如果您将其中一个子div更改为flex：2，则为1 + 2 = 3，div为1/3和2/3。

Answer 2

与flex和justify-content相同的想法：space-between;

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

将包含元素的div调整为不同的分辨率

2 个答案: