Question

如何让这段HTML工作，使文本垂直对齐图像图标的顶部并继续包裹在下面？

这是我到目前为止所拥有的：

<div style="width:300px;">
        <i class="icon-twitter icon-4x"></i> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit dolor sit amet, consectetur adipiscing elit adipiscing elit adipiscing elit adipis Lorem ipsum dolor dolor</span>
    </div>

http://jsfiddle.net/xe9zD/

非常感谢任何帮助。

由于

Answer 1

添加此CSS规则：

.icon-twitter.icon-4x {
    float:left;
}

<强> jsFiddle example

Answer 2

如果您使用默认的bootstrap css，它包含左右浮动的辅助类。如果你在你的图标中添加左拉类，它会向左浮动。

<i class="icon-twitter icon-4x pull-left"></i>

编辑：这也给了它一个很好的余地，所以它没有与文本对接。它是你的字体真棒css文件的一部分。

Answer 3

Working DEMO 使用float left

.icon-twitter icon-4x
{
   float: left;
}

如果是直接来自live css那么

<i style="float:left;" class="icon-twitter icon-4x"></i> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit dolor sit amet, consectetur adipiscing elit adipiscing elit adipiscing elit adipis Lorem ipsum dolor dolor</span>

顶部对齐图像图标旁边的文本

3 个答案: