Я разрабатываю игру для развлечения, вы, ребята, поможете мне правильно расположить шкалы здоровья и маны поверх персонажей? Я показал правильные позиции стрелками. Также мой код css может быть ненужным дублированным. Прямо сейчас это выглядит так:

image of duel

<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>

Css:

.avatarimg{
      width: auto;
      margin-left: 20px;
      display: inline-block;
  }

  .progress-container {
  position: relative;
  display: inline-block;

  }
  .progress-container progress {
  background-color: #eee;
  height: 20px;
  }

  .progress-container progress::-webkit-progress-bar {
  background-color: #eee;
  }

  .progress-container progress::-webkit-progress-value {
  background-color: red;
  }

  .progress-container .progress-label {
  position: absolute;
  top: 2px;
  margin: 0;
  left: 60px;
  font-size: 20px;
  font-family: Minecraft;
  }
  .op{
      width: auto;
      margin-left: 40px;
      display: inline-block;
      -webkit-animation: bounce ease-in 5;
animation: bounce ease-in 5;
-webkit-animation-duration: 20000ms;
animation-duration: 1000ms;
  }

  .progress-containermana {
  position: relative;
  display: inline-block;

  }
  .progress-containermana progress {
  background-color: #eee;
  height: 20px;
  }

  .progress-containermana progress::-webkit-progress-bar {
  background-color: #eee;
  }

  .progress-containermana progress::-webkit-progress-value {
  background-color: blue;
  }
  .progress-containermana .progress-label {
      position: absolute;
      top: 2px;
      margin: 0;
      left: 60px;
      font-size: 20px;
      font-family: Minecraft;
  }
0
Yunus Emre Guney Student 2 Янв 2018 в 19:27

2 ответа

Лучший ответ

Простое решение вашей проблемы может включать: перемещение div-ов, чтобы иметь другой порядок элементов, например:

  <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>

Я просто изменил порядок 2-го и 3-го «элементов» (чтобы сначала были оба красных, а затем синий на вашем изображении). Затем вы можете добавить простой элемент разрыва строки <br>, чтобы заставить первый синий элемент перейти на новую строку.

1
flynorc 2 Янв 2018 в 17:44

Есть много решений, но попробуйте Flexbox

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

В конечном итоге вы пытаетесь контролировать выравнивание и позиционирование блочной модели с помощью css. Старый способ сделать это - определить каждый столбец как блочный элемент, а затем float:left; width: 50%; этих столбцов. Новый подход flexbox заключается в том, чтобы определить «направление текста», однако в данном случае вам нужно, чтобы контент перемещался: сначала столбец сверху вниз, а затем переход к следующему столбцу.

Старый поплавковый подход

.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>
1
Tony Chiboucas 2 Янв 2018 в 18:33