For example, I have class .book element
and it's 300px
and i can't change it. And I have img
with width: 160px
, so how I can make content equal to the image width and not to .book-element
?
.book-element {
cursor: pointer;
width: 300px;
}
.book-content img {
height: 240px !important;
width: 160px !important;
}
.book-content p {
margin: 0;
font-size: 16px;
color: blue;
}
.book-content .title-book {
margin-top: 8px;
font-size: 20px;
font-weight: bold;
line-height: 1;
}
.book-content .price {
font-weight: bold;
font-size: 18px;
}
<div class="book-element">
<div class='book-content'>
<img src='https://i.pinimg.com/474x/2c/0b/ee/2c0bee39cc1fff39ff1b09517e8962d6.jpg' alt="bookshop" />
<p class="title-book">Looking for Alaska (special edition)</p>
<p>J.Green</p>
<p class="price">23.99$</p>
</div>
</div>