在包装器div中div，最大宽度彼此相邻

Question

I've got a div that wrappes two other divs. One of those contains an image and the other some text. The one with the image should be shown on the left hand side of the div containing the text.

the wrapper div got a max width. If this one is reached, the text should start to wrap inside of the text div.

No matter what I tried (float, flex, inline-block) I could not manage to get a result that works. I could make it work until the text starts to wrap. but then the two divs where all the sudden under each other again.

If someone could give me a hand here, I would be very glad.

HTML

<div  class="toast" >
<div class="toastImg"><img style="float:left;margin-left:8px;width:24px" src="http://www.gravatar.com/avatar/09f4f4e7486e3a25f4c4883258fd32d6/?default=&amp;s=80"></div>
<div class="toastText">blablalsadosaoadblablalsadosaojdoad</div>
</div>

CSS

.toast {
    width:auto;
    max-width:300px;
    height:auto;
    background-color: #383838;
    color: #F0F0F0;
}
.toastImg{
  float:left;
  width:10%;
}
.toastText{
    width:90%;
}

http://jsfiddle.net/egxtU/582/

Answer 1

You can do this with Flexbox and word-break: break-all . Here is Fiddle . Or instead of flexbox you can use display: table DEMO

 .toast { max-width:300px; background-color: #383838; color: #F0F0F0; display: flex; } .toastText { word-break: break-all; } 

 <div class="toast" > <div class="toastImg"><img style="float:left;margin-left:8px;width:24px" src="http://www.gravatar.com/avatar/09f4f4e7486e3a25f4c4883258fd32d6/?default=&amp;s=80"></div> <div class="toastText">blablalsadosaoadblablalsadosaojdoad</div> </div> 

Answer 2

.toast {
  display:flex;
}

the contained divs won't wrap unless you add "flex-wrap:wrap;" to .toast

.toastImg{
  float:left; <-- delete this
}

Answer 3

Solution without flexbox (in case of IE); https://jsfiddle.net/4mqazcyw/

CSS:

.toast {
    width:auto;
    max-width:300px;
    min-height: 24px;
    height:auto;
    background-color: #383838;
    color: #F0F0F0;
 }
.toastImg{  
   width:24px;
   float:left;
}
.toastText{
     width:270px;
     margin-left:30px;
     position:relative;  
}

HTML:

<div  class="toast" >
<div class="toastImg"><img style="width:24px"src="http://www.gravatar.com/avatar/09f4f4e7486e3a25f4c4883258fd32d6/?default=&amp;s=80"></div>
<div class="toastText">blablalsadosaoadblablalsadosaojdoad lsadosaojdoad lsadosaojdoad lsadosaojdoad</div>
</div>

Answer 4

Something like this?

HTML

<div  class="toast" >
<div class="toastImg"><img style="float:left;margin-left:8px;width:24px" src="http://www.gravatar.com/avatar/09f4f4e7486e3a25f4c4883258fd32d6/?default=&amp;s=80"></div>
<div class="toastText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et eros turpis. Sed pharetra in tellus a rhoncus. Suspendisse in vulputate neque, eget egestas tellus. Nullam eleifend quis purus ac consequat. Vivamus quis ligula maximus dolor porttitor bibendum. Maecenas ornare pulvinar eros porta semper. Morbi a ante a enim auctor accumsan et eget quam. Pellentesque ac sagittis diam. Vestibulum volutpat quam nibh, et porttitor velit convallis quis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin semper nunc sit amet varius pellentesque. In nunc eros, consequat et ornare et, bibendum commodo ex. Phasellus quis turpis ut ante facilisis molestie porta sed arcu.</div>
</div>

CSS

.toast {
    width:auto;
    max-width:300px;
    height:auto;
    background-color: #383838;
    color: #F0F0F0;
    border:solid black 3px;
    overflow:hidden;
}
.toastImg{
  float:left;
  width:30px;
  border:solid blue 3px;
}
.toastText{
    border: red solid 3px;
    overflow:hidden;
}

https://jsfiddle.net/vf02qojk/