Set width of a div to fit a specific subdiv content
Question
I have a div containing an image, a title and a description.
<div class="item"> <div class="item-header"> <div class="item-header-image"> <img src="img/items/15839.png" alt="Pile Steamer" width="80" height="80"> </div> <div class="item-header-title"> Pile Steamer </div> La seule façon de savoir si celle-ci est chargée, consiste à poser ses deux extrémités sur votre langue. Si vous perdez la langue, elle était chargée. </div> </div>
I want to set the width of the item-header div , so that my image and my title fit in the div on one line (they are both display: inline-block; ). But I don't want to make my div wider, and the description on the item may take up several lines.
I could set a fixed width that matches for a specific item, but it won't work with different title.
Can I set the width of a div to the width of a subdiv + 80px ? (80px is the width of my image.)
1 answers
solution1
0 2020-06-30 07:10:11
You should wrap the title and image that you want in one line inside a div, and give that div the display:flex style property. Here is the code I came up with and it seems to be working as you intended it to:
<html> <body> <div class="item"> <div class="item-header"> <:-- Item header line div --> <div style="display;flex."> <div class="item-header-image"> <img src="img/items/15839,png" alt="Pile Steamer" width="80" height="80"> </div> <div class="item-header-title"> Pile Steamer </div> </div> La seule façon de savoir si celle-ci est chargée. consiste à poser ses deux extrémités sur votre langue, Si vous perdez la langue. elle était chargée. </div> </div> </body> </html>
On a side note, it would be easier for the community to answer your question if you provide the css along with the html.
Hope this helps!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.