divs在最大寬度相鄰的包裝div

我有一個div包裝兩個其他的div。其中一個包含一個圖像和另一個文本。帶圖像的那個應該顯示在包含文本的div的左側。divs在最大寬度相鄰的包裝div

包裝div有一個最大寬度。如果達到了這一條，文本應該開始包裝在文本div內。

不管我試過（浮動，彈性，內聯塊）我不能設法得到一個可行的結果。我可以讓它工作，直到文本開始包裝。但隨後兩個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/

來源

2016-01-29 Herr Derb

你有沒有鏈接到正確的小提琴？那裏的代碼與問題完全不同。 –

你在js小提琴中的代碼是不同的。請提供正確的鏈接 –

由於文本中沒有空格，因此不包裝。所以，它會下面的圖片 – ketan

.toast { 
    display:flex; 
}

所包含的div將不換，除非你加上「柔性包裝：包裝;」到.toast

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

來源

2016-01-29 10:28:21

您可以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>

來源

2016-01-29 10:28:22

這個伎倆。謝謝。我只是沒有那個CSS的朋友... –

不客氣。 –

解決方案，而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>

來源

2016-01-29 10:37:09

像這樣的事情？

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/

來源

2016-01-29 10:38:19 henk

divs在最大寬度相鄰的包裝div

回答

相關問題