如何避免文本在css下方的图标下方？

Question

这是我想用CSS实现的一个可视化示例:

另请参见http://jsfiddle.net/En4yC/3/

问题是我需要在图标旁边对齐文本,但不要给它一个严格的宽度,因为容器列是液体.你认为这有可能吗？也许一些负利润可以用于浮动？

//CSS
.column {
    width:33.3333%;
}

.ico {
    display: inline-block;
    float:left;
    width: 32px;
    height: 32px;
    margin-top: 4px;
    margin-right:10px;
    line-height: 32px;
    background-image: url("http://fakeimg.pl/32x32/");
    background-position: 0 0;
    background-repeat: no-repeat;
}

//HTML
<div class="column"> 
    <span class="ico"></span>
    <span class="title">Curabitur pharetra<br/> nibh eget<br/> lorem<br/> egestas laoreet</span>
</div>

Answer 1

将其添加到您的CSS:

.title { display: block; overflow: hidden; }

这样,如果有图像,文本将在图像旁边,如果没有,它将粘在容器的左边框上.我删除了br标签,以表明它也可以在没有它们的情况下工作:

http://jsfiddle.net/En4yC/9/