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

只需删除＆＃34;文字＆＃34; element会完成任务。

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

Answer 2

使用1为calc元素应用剩余宽度，如下所示。

.text

＆＃13;

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

＆＃13;

.container
{
    border: 1px solid gray;
}

.icon
{ 
    float: left;
    width: 25px;
    height: 25px;
    border:1px solid #ff00ff;
}

.text
{
   float:left;
   width:calc(100% - 30px);
}

＆＃13;

Answer 3

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

.text {
   display: block;
}

你可以添加更多的.icon

边距

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

使文本环绕浮动div

3 个答案: