html - 如何避免文本使用 css 位于图标下方？

Question

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

在 http://jsfiddle.net/En4yC/3/ 也有实例

问题是我需要将文本与图标对齐，但没有给它严格的宽度，因为容器列是液体。你认为这可能吗？也许一些负边距适用于 float ？

//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/