в divs в обертке div с максимальной шириной рядом друг с другом

Question

У меня есть div, который обертывает два других div. Один из них содержит изображение, а другой текст. Изображение с изображением должно отображаться в левой части div, содержащего текст.

обертка div имеет максимальную ширину. Если это достигнуто, текст должен начать обертываться внутри текстового div.

Независимо от того, что я пытался (float, flex, inline-block), я не смог добиться результата, который будет работать. Я мог бы заставить его работать, пока текст не начнет обертываться. но затем два divs, где все внезапно под друг друга снова.

Если бы кто-то мог дать мне руку здесь, я был бы очень рад.

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

.toast { 
    display:flex; 
} 

содержащиеся дивы не завернуть, если не добавить "Flex-обертку: обертывание;" в .toast

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

Answer 2

Вы можете сделать это с Flexbox и word-break: break-all. Вот Fiddle. Или вместо Flexbox вы можете использовать display: tableDEMO

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

решение без Flexbox (в случае 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

Что-то вроде этого?

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/