0

подскажите пожалуйста, хочу, чтобы три моих блока шли в ряд (фото, названия, прогрессив бар), добавил display: flex к общему для них блоку с классом skills-bar, однако в ряд встали только фото и название, поэтому я добавил display: flex к общему блоку для названий и бара с классом skills-name-bar, но после этого ширина бара резко уменьшилась. Пробовал вместо flex использовать iline-block, но блоки не становятся в ряд. Как выставить блоки с названиями и прогрессив бар в ряд?

html,
:root {
  --background: rgba(0, 214, 170, 0.95);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #222;
  font-family: 'Playfair Display', serif;
  font-weight: 400;
}

.container {
  max-width: 1100px;
  margin: auto;
}

#skills {
  margin-top: 50px;
  color: #C4C4C4
}

#skills .skills-bar {
  display: flex;
  margin: auto 0;
}

#skills .skills-image {
  width: 40%;
  margin-left: 20px;
}

#skills .skills-image img {
  width: 80%;
}

#skills .skills-name-bar {
  margin: auto 0;
  width: 100%;
  border: 2px solid red;
}


}
#skills .toolbar {
  margin: auto 0;
  width: 100%;
  display: 2px solid red
}
#skills .outerbar {
  width: 100%;
  height: 20px;
  background-color: #d8d8d8;
  border-radius: 100px;
  margin-bottom: 20px;
}
#skills .bar {
  background: linear-gradient(to right bottom, #0b968f, #00a786, #1bb66f, #58c24c, #8fcb0a);
  border: 1px solid #58c24c;
  box-shadow: 0 1px 1px -8px #1bb66f, 0 1px 3px #1bb66f;
  border-radius: 100px;
  height: 100%;
  transition: width 1s linear;
  min-width: 200px;
}
#skills .percent-label {
  float: right;
  margin-right: 5px;
  font-size: 12px;
  line-height: 1.7em;
  color: #fff;
}
#skills .skill-name {
  font-weight: 600;
  letter-spacing: 4px;
  margin: 0 30px;
}
#skills .skill-name-label {
  margin-bottom: 20px;
}

/* Animate the blue skill bar on page load */
@keyframes bar {
  0% {
    width: 0;
  }
}
#skills .bar {
  -webkit-animation: bar 2s ease-in-out;
  -moz-animation: bar 2s ease-in-out;
  animation: bar 2s ease-in-out;
}
<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <section>
    <div id="skills">
      <div class="container">
        <div class="skills-bar">
          <div class="skills-image">
            <img src="https://images.unsplash.com/photo-1489423561257-34e31d8836b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=518&q=80">
          </div>

          <div class="skills-name-bar">
            <div class="skill-name">
              <div class="skill-name-label">Portrairs:</div>
              <div class="skill-name-label">City:</div>
              <div class="skill-name-label">Studio:</div>
              <div class="skill-name-label">Nature:</div>
              <div class="skill-name-label">Beauty:</div>
              <div class="skill-name-label">Other:</div>
            </div>

            <div class="toolbar">

              <div class="outerbar">
                <div class="bar" style="width: 90%;">
                  <div class="percent-label"><span id="count">90</span>%</div>
                </div>
              </div>


              <div class="outerbar">
                <div class="bar" style="width: 70%;">
                  <div class="percent-label"><span id="count">70</span>%</div>
                </div>
              </div>


              <div class="outerbar">
                <div class="bar" style="width: 60%;">
                  <div class="percent-label"><span id="count">50</span>%</div>
                </div>
              </div>

              <div class="outerbar">
                <div class="bar" style="width: 80%;">
                  <div class="percent-label"><span id="count">80</span>%</div>
                </div>
              </div>

              <div class="outerbar">
                <div class="bar" style="width: 30%;">
                  <div class="percent-label"><span id="count">30</span>%</div>
                </div>
              </div>

              <div class="outerbar">
                <div class="bar" style="width: 75%;">
                  <div class="percent-label"><span id="count">75</span>%</div>
                </div>
              </div>
            </div>

          </div>
        </div>

      </div>
    </div>


  </section>
</body>

</html>

1 ответ 1

1

У Вас ошибка в css

#skills .skills-name-bar {
    margin: auto 0;
    width: 100%;
    border: 2px solid red;
} 

/*лишний*/
} 

#skills .toolbar {
    margin: auto 0;
    width: 100%;
    display: 2px solid red /* наверно border вместо display*/
}

и у #skills .skills-name-bar нету display: flex;

2
  • спасибо большое! проблема решена
    – Igor
    Commented 5 мая 2020 в 23:49
  • @Igor Пожалуйста
    – Smoke
    Commented 5 мая 2020 в 23:51

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.