防止文本在图标下包装

Question

我正在尝试创建一个项目列表，每个项目都需要在左侧有一个图标。对于长命名项，文本将包裹在图标下。我该如何防止这种情况发生？

在图片下方，您可以看到“已创建”文字位于文件图标下方：

我正在使用bootstrap，这就是我创建每个项目的方式：

var renderActivity = function(a) {
  var html = "";
  html += "<a title='" + a.title + "' href='" + a.path +"' class='list-group-item clearfix" + a.type + "'>";
  html +=   "<span class='glyphicon glyphicon-"+a.icon+" pull-left fa-3x'></span>";
  html +=   "<div>";
  html +=       "<h3 class='list-group-item-heading'>" + a.type + ": " + a.title + "</h3>";
  html +=       "Created: " + a.created
  html +=   "</div>";
  html += "</a>";

  return html
}

Answer 1

You have to float: left the div after the p tag. What is currently hapening is how a floating element is expected to behave with simple text surrounding it. Just like images in newspaper are floated to left and right and the text goes sideways to the images and then passes below the image when the runs of text extends below the image.

What you have to do is also float the div after the p tag. But to make it float you will have to give it specific width too. The following code should solve your problem:

    a {
        display: block;
        float: left;
        max-width: 400px;
        border: 1px solid cyan;
        padding: 2px;
    }
    
    a > p {
        float: left;
        border: 1px dotted green;
        margin-right: 2px;
    }
    
    a > div {
        float: left;
        max-width: 350px;
        border: 1px dotted red;
    }

       <a href="">
            <p>
                <img src="https://i.stack.imgur.com/8lMxs.png" width="24" height="24" alt="">
            </p>
            <div>
                <span>
		      <h3>File my gcr labour relations, greiviences, improvements and desiplnies and on and on</h3>
		       Created: monday morning for al of em.
		</span>
            </div>
        </a>

P.S: If you are using bootstrap then I'd suggest to use media object in these scenarios. They use tables layout for, may be, better old browser compatibly.

Answer 2

There are a lot of solutions. One way:

https://jsfiddle.net/4r9fwwys/

.txt-part{
  float: left;
  padding: 0 0 0 10px;
  display: inline-block;
}

.glyphicon {
  float: left;
  font-size: 30px;
  display: inline-block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<a title="title" href="path" class="list-group-item clearfix type">
  <span class="glyphicon glyphicon-open pull-left fa-3x"></span>
  <div class="txt-part">
  <h3 class="list-group-item-heading">    
    type:title
  </h3>
  <span class="created">created</span>
  </div>
</a>
<a title="title" href="path" class="list-group-item clearfix type">
  <span class="glyphicon glyphicon-remove pull-left fa-3x"></span>
  <div class="txt-part">
  <h3 class="list-group-item-heading">    
    type:title
  </h3>
  <span class="created">created</span>
  </div>
</a>

Down side of this - can become ugly on long content or small screen. But at least for small screen You could add one more class to that icon span - hidden-xs (hidden-xs-down for Bootstrap v4)

But I would try to place that icon in a :before style like this:

https://jsfiddle.net/f5jzeksm/

a > h3, a > span {
  padding-left: 15px;
}
.created {
  font-size: 80%;
}
h3 {
  poaition: relative;
}
h3:before {
  font-family: 'Glyphicons Halflings';
  position: absolute;
  left: 2px;
 }
h3.icon-glyphicon-open:before {
  content: '\e167';
}
h3.icon-glyphicon-remove:before {
  content: '\e014';
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<a title="title" href="path" class="list-group-item clearfix type">
  <h3 class="list-group-item-heading icon-glyphicon-open">    
    type:title
  </h3>
  <span class="created">created</span>
</a>
<a title="title" href="path" class="list-group-item clearfix type">
  <h3 class="list-group-item-heading icon-glyphicon-remove">    
    type:title
  </h3>
  <span class="created">created</span>
</a>