如何获取行内显示的文本以换行并增加父容器的高度？

Question

I have an image and next to it a div with 2 child divs. Both the image and container of the 2 divs are displayed inline-block. The 2 divs contain a line of text. I would like for the parent div to increase in height if the text overflows, but instead, the lines of text get pushed below the image. Here are 2 examples. In the first, the text is correctly aligned next to the image. In the 2nd, the text gets pushed below the image because it overflows.

 .w-165{ width: 165px; } .soft-border{ border: solid 1px rgba(76, 84, 98, 0.3); } .h-70{ height: 70px; } .d-inline-block{ display: inline-block; } .align-middle{ vertical-align: middle; } 

 <div class="w-165 soft-border"> <div class="soft-border"> Notifications </div> <div> <img class="h-70 d-inline-block align-middle" src="https://a248.e.akamai.net/f/248/9086/10h/s7d2.scene7.com/is/image/Caterpillar/C820021?$cc-g$"> <div class="d-inline-block align-middle"> <div> New Issue </div> <div> Dec 15 </div> </div> </div> </div </div> 

 .w-165{ width: 165px; } .soft-border{ border: solid 1px rgba(76, 84, 98, 0.3); } .h-70{ height: 70px; } .d-inline-block{ display: inline-block; } .align-middle{ vertical-align: middle; } 

 <div class="w-165 soft-border"> <div class="soft-border"> Notifications </div> <div> <img class="h-70 d-inline-block align-middle" src="https://a248.e.akamai.net/f/248/9086/10h/s7d2.scene7.com/is/image/Caterpillar/C820021?$cc-g$"> <div class="d-inline-block align-middle"> <div> New Issues </div> <div> Dec 15 </div> </div> </div> </div </div> 

Answer 1

The easiest thing to do here is to define a width for the div in question. That will force text to wrap.

width: 60px;

Answer 2

One of many solutions can be to use a table layout for your image and text container - so add this to your CSS:

.w-165 > div:last-child {
  display: table;
}
.w-165 > div:last-child > * {
  display: table-cell;
}

See demo below:

 .w-165 { width: 165px; } .soft-border { border: solid 1px rgba(76, 84, 98, 0.3); } .h-70 { height: 70px; } .w-165 > div:last-child { display: table; } .w-165 > div:last-child > * { display: table-cell; } .d-inline-block { display: inline-block; } .align-middle { vertical-align: middle; } 

 <div class="w-165 soft-border"> <div class="soft-border"> Notifications </div> <div> <img class="h-70 d-inline-block align-middle" src="https://a248.e.akamai.net/f/248/9086/10h/s7d2.scene7.com/is/image/Caterpillar/C820021?$cc-g$"> <div class="d-inline-block align-middle"> <div> New Issues </div> <div> Dec 15 </div> </div> </div> </div> 

Answer 3

I tried to adjust the code for make it works as you wanted, check this fiddle .

CSS

I had to add width to the div s to make the text wraps, of course with this solution if you enter a word that is too long it will get out of the div .

.h-70{
  width: 95px;
}

.d-inline-block div{
  width:60px;
}

Let me know if it helped please, thank you.