0

есть такие пункты. Подскажите пожалуйста, как правильнее их верстать что бы они не выбивались из потока. При добавление им rotate(-90deg) их ширина меняется с высотой, и за чего нормально их нельзя позиционировать. Какой подход сделать что не играться с position absolute( при смене контента все полетит) если ставить через absolute

введите сюда описание изображения

1
  • 1
    Код выложите, чтоб можно было более предметно обсуждать.
    – meine
    Commented 18 мар. 2020 в 6:58

1 ответ 1

1

В отличие от ответа на toster.ru который я дал то в этом случае я кручу весь блок chart в котором эти линии line расположены как положено в своей оси и имеют width что и видно в этом примере....

*{
  margin: 0;
  padding: 0;
}

body{
  height: 500px;
  background: #dadada;
  text-align: center;
  font-family: sans-serif;
}

.item{
  display: inline-flex;
  align-items: center;
  padding: 20px 40px;
  border-radius:  20px;
  background: #fff;
  text-align: left;
  margin-top: 30px;
}

.item_img img{
  border-radius: 50%;
  display: block;
  width: 100px;
  height: 100px;
}

.item_bio, .item_chart{
  margin-left: 20px;
}

.item_bio p{
  font-size: 12px;
}

.chart{
  transform-origin: center;
  transform: rotate(-90deg);
}

.chart div{
  margin: 10px;
}

.chart p{
  font-size: 12px;
}

line{
  display: block;
  height: 10px;
  border-radius: 10px;
  background: #cc0;
  margin-top: 6px;
}

.ch1 line{
  width: 70%;
}

.ch2 line{
  width: 90%;
}

.ch3 line{
  width: 50px;
}
<div class="item">
  <div class="item_img">
    <img src="http://placehold.it/100/cc0" alt="">
  </div><!--img-->
  <div class="item_bio">
    <h3>Lorem Ipsum</h3>
    <p>
      Lorem ipsum dolor <br>
      sit amet, consectetur<br> 
      adipisicing elit.<br>
      Voluptas voluptate <br>
      maxime tempore esse
    </p>
  </div><!--bio-->
  <div class="item_chart">
    <div class="chart">
      <div class="ch1">
        <p>Lorem, ipsum dolor.</p>
        <line></line>
      </div>
      <div class="ch2">
        <p>Lorem ipsum dolor sit.</p>
        <line></line>
      </div>
      <div class="ch3">
        <p>Lorem, ipsum dolor.</p>
        <line></line>
      </div>
    </div><!--chart-->
  </div><!--chart-->
</div><!--item-->

Ваш ответ

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

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