定位在图片css html之上

Question

我正在开发一款有趣的游戏，你们可以帮助我在角色上正确定位健康和法力棒吗？我用箭头显示了正确的位置。所以我的css代码可能是不必要的公开。 现在它看起来像那样：

    public ClassName() {}

的CSS：

<div class="progress-container player-health">
    <progress id="playerhealth" *ngIf="state==1"  id="playerhealth" value="100" max="100"></progress>
    <p class="progress-label">
      {{hp}}
    </p>

  </div>
  <div class="progress-containermana">
    <progress id="playermana" *ngIf="state==1"   value="100" max="100"></progress>
    <p class="progress-label">
      {{playermana}}player
    </p>

  </div>
  <div class="progress-container enemy-health">
    <progress id="enemyhealth" *ngIf="state==1"   id="ophealth" value="100" max="100"></progress>
    <p class="progress-label">
  {{ophp}}
    </p>
  </div>
  <div class="progress-containermana">
    <progress id="opmana" *ngIf="state==1"   value="100" max="100"></progress>
    <p class="progress-label">
      {{opmana}}op
    </p>

  </div>
<div>
  <img *ngIf="state==1" width="200" height="100" class="avatarimg" src="{{playeravatar}}">
  <img *ngIf="state==1" width="200" height="100" class="op" src="{{opavatar}}">
</div>

Answer 1

您的问题的简单修复可能包括： 移动divs arround以获得另一个这样的元素顺序：

  <div class="progress-container player-health">
    <progress id="playerhealth" *ngIf="state==1"  id="playerhealth" value="100" max="100"></progress>
    <p class="progress-label">
      {{hp}}
    </p>

  </div>

  <div class="progress-container enemy-health">
    <progress id="enemyhealth" *ngIf="state==1"   id="ophealth" value="100" max="100"></progress>
    <p class="progress-label">
  {{ophp}}
    </p>
  </div>
  <br>
  <div class="progress-containermana">
        <progress id="playermana" *ngIf="state==1"   value="100" max="100"></progress>
        <p class="progress-label">
          {{playermana}}player
        </p>
      </div>
  <div class="progress-containermana">
    <progress id="opmana" *ngIf="state==1"   value="100" max="100"></progress>
    <p class="progress-label">
      {{opmana}}op
    </p>

  </div>

我刚改变了第二和第三个“元素”的顺序（首先是红色的，然后是图像中的蓝色）。然后，您可以添加一个简单的换行符<br>元素，以强制第一个蓝色元素转到新行。

Answer 2

有很多解决方案，但请尝试Flexbox

.progress-container {
    display: flex;
    flex-flow: column wrap;
    height: 50px;
}

最终，您正试图用css控制盒子模型的对齐和定位。执行此操作的旧方法是将每个列定义为块元素，然后float:left; width: 50%;这些列。新的 flexbox 方法是定义“文本方向”，但是你需要内容流，在这种情况下：首先是一个从上到下的列，然后换行到下一列。 / p>

旧浮动方法

.container {
   float: left;
   width: 40%;
   border: 1px solid red;
   margin: 2%;
}

.container div {
   margin: 5px;
   background-color: #7f7;
}

<div class="container">
    <div>Something1</div>
    <div>Something2</div>
</div>
<div class="container">
    <div>Something3</div>
    <div>Something4</div>
</div>

Flexbox列

尝试更改flex-flow和height属性，看看会发生什么。

.container {
   display: flex;
   flex-flow: column wrap;
   border: 1px solid red;
   height: 4.4em;
}

.container div {
   margin: 0.1em;
   background-color: #7f7;
   height: 2em;
}

<div class="container">
    <div>Something1</div>
    <div>Something2</div>
    <div>Something3</div>
    <div>Something4</div>
</div>