Question

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

包装器div获得最大宽度。如果达到这个，文本应该开始包装在文本div内。

无论我尝试了什么（float，flex，inline-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>

Answer 2

.toast {
  display:flex;
}

除非你添加“flex-wrap：wrap;”，否则包含的div将不会换行到.toast

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

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/

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

4 个答案: