0

我如何让这段 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>

https://jsfiddle.net/xe9zD/

任何帮助深表感谢。

谢谢

4

3 回答 3

3

添加此 CSS 规则：

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

JSFiddle 示例

于 2013-05-23T14:39:46.107 回答
3

如果您使用的是默认引导 css，它包括帮助类来左右浮动。如果您将类 pull-left 添加到您的图标，它将向左浮动。

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

编辑：这也给它一个很好的边距，所以它不会与文本对接。它是您字体真棒 css 文件的一部分。

于 2013-05-23T14:41:14.273 回答
1

工作 DEMO 使用 float left

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

如果它直接来自现场 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>
于 2013-05-23T14:38:32.030 回答