html - 如何避免文字低于带有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/

Answer 2

使标题浮动在浮动图标旁边：

.title { float: left; }

演示：http: //jsfiddle.net/Guffa/En4yC/4/

Answer 3

只要您的图标是静态大小，您就可以使用边距：

http://jsfiddle.net/En4yC/7/

.title {
    margin-left: 42px; /* size of image + desired padding after image */
    display: block;
}

Answer 4

来了……

HTML

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

CSS

.column
{
    width:33%;
}

.ico, 
.title
{
   display:inline-block;
   vertical-align:top;
}

.ico 
{
    width:32px;
    height:32px;
    background: url("http://fakeimg.pl/32x32/") no-repeat 0px 0px;  
    padding:5px;
}

希望能帮助到你。

Answer 5

的HTML：

<div class="content">
<img src="img.jpg" width="30" height="30" />
<p>Curabitur pharetra nibh eget lorem egestas laoreet</p>
</div>

你的CSS：

.content {
padding: 0 0 0 50px;
position: relative; 
}

.content img {
left: 0;
position: absolute;
top: 0;
}

Answer 6

这个怎么样？这显示了如何将图标或图像放在 div 中，并将其放在另一个 div 旁边，其中包含文本，这将确保文本一致地流动。

http://jsfiddle.net/En4yC/6/

<div class="icon">
    <img src="http://fakeimg.pl/32x32/" />
</div>
<div class="text">
    Curabitur pharetra nibh eget lorem egestas laoreet
</div>

.icon {
    float:left;
}

.text {
    float:left;
    padding: 0 10px;
    width: 100px;
}