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