javascript - 到最大宽度彼此相邻的包装 div 中的 div

Question

我有一个包裹着另外两个 div 的 div。其中一个包含图像，另一个包含一些文本。带有图像的应该显示在包含文本的 div 的左侧。

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

无论我尝试了什么( float 、 flex 、内联 block )，我都无法获得有效的结果。我可以让它工作，直到文本开始换行。但随后两个 div 突然又在彼此下面。

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

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

您可以使用 Flexbox 和 word-break: break-all 来做到这一点.这是 Fiddle .或者您可以使用 display: table DEMO 而不是 flexbox

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