使文本环绕浮动div

Question

我有两个DIV，第一个DIV是一个图标，第二个是一个长文本，都向左浮动：

<div class="container">
    <div class="icon"></div>
    <div class="text"></div>
</div>

CSS

.container
{
    border: 1px solid gray;
}

.icon
{ 
    float: left;
    width: 25px;
    height: 25px;
}

.text
{
    float: left;
}

问题是当我将浏览器宽度调整到最小时，图标停留在第一行，文本分为第2，第3，第4等行。我希望至少有一些文本保留在第一行，换句话说，如果没有剩余空间，我希望文本环绕图标。我怎么能做到这一点？谢谢！

Answer 1

只需删除“text”元素即可完成任务。

<div class="container">
    <div class="icon"></div>
    Text that you want to be wrapped can be written here
</div>

Answer 2

使用calc将剩余宽度应用于.text元素，如下所示。

.text
{
  float:left;
  width:calc(100% - 30px);
}

.container
{
    border: 1px solid gray;
}

.icon
{ 
    float: left;
    width: 25px;
    height: 25px;
    border:1px solid #ff00ff;
}

.text
{
   float:left;
   width:calc(100% - 30px);
}

<div class="container">
    <div class="icon"></div>
    <div class="text">This is some text showing how it is woring for a loooooooooong text.</div>    
</div>

Answer 3

您只需将下一个元素更改为显示块而不浮动

.text {
   display: block;
}

你可以添加更多的.icon边距

.icon
{ 
    float: left;
    width: 25px;
    height: 25px;
    margin:0 10px 10px 0;
}