Javascript 以最大宽度相邻的方式在包装器div中进行div

我有一个节目包住了另外两个节目。其中一个包含图像，另一个包含文本。带有图像的应该显示在包含文本的div的左侧

包装器div有一个最大宽度。如果达到这个值，文本应该开始在文本div内换行

无论我尝试了什么（float、flex、inlineblock），我都无法获得有效的结果。我可以让它工作，直到文本开始换行。但后来两个跳水员突然又在对方身下

如果有人能帮我一把，我会很高兴的

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>

<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>

除非将“flex-wrap:wrap；”添加到.toast，否则所包含的div不会自动换行

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

.toasting{
float:left；您可以使用Flexbox和来执行此操作。或者，您可以使用
display:table


.toast{
最大宽度：300px；
背景色：#3838；
颜色：#f0；
显示器：flex；
}
.烤面包{
单词break：打破一切；
}

blablalsadosaodablalsadosaojdoad
不带flexbox的解决方案（在IE的情况下）

CSS:

HTML:


blablalsadosaodablalsadosaojdoad lsadosaojdoad lsadosaojdoad lsadosaojdoad lsadosaojdoad
像这样的东西

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>

<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>

你链接到正确的fiddle了吗？其中的代码与问题完全不同。你在js fiddle中的代码不同。请提供正确的链接。它没有包装，因为文本中没有空格。因此，它将转到下图
<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>

<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>

.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;
}