Html 标题左侧浮动图像的CSS

如果我想将图像浮动到标题的左侧，我通常的做法是：

<img src="html5_connectivity.svg" width="90" height="90" alt="[HTML5 Connectivity Logo]" class="FloatLeft" />
<h3 data-anchorid="sockets">Connectivity</h3>

连通性

Want I Want是相同的视觉效果，将图像浮动到标题的左侧，但将图像标记放在文档标题的后面，如下所示：

<h3 data-anchorid="sockets">Connectivity</h3>
<img src="html5_connectivity.svg" width="90" height="90" alt="[HTML5 Connectivity Logo]" class="FloatLeft" />

连接性

---

我不知道什么样的CSS技巧（最好是CSS级别2.1）可以实现这一点。有什么建议吗？

您可以设置页眉的左边距，然后您的图像将一直保留到结尾，页眉将在后面

    <h3 data-anchorid="sockets" style="margin-left: 100px;">Connectivity</h3>
    <img src="html5_connectivity.svg" width="90" height="90" alt="[HTML5 Connectivity Logo]" 
class="FloatLeft" />

连接性

我会在

h3

上加一个左边距或填充，在

img

上加一个负上边距，如果您知道图像的确切尺寸，这将起作用：

h3.headline {
    padding-left: 90px;
}

img.image {
   position: relative;
   left: 0;
   top: -90px;
   margin-bottom: -90px
}

---

澄清一下：这只是使用默认文档流并相对地重新定位图像。不过，这只有在您确切知道尺寸时才起作用。在css中，您必须考虑填充和边距。

更具体地说，上面提到的左边距应与

IMG

的宽度相对应（加上

IMG

和

H3

之间的任何所需空间），负上边距应与

H3

的高度相对应。此外，如果希望后续元素显示在

IMG

的右侧和

H3

的下方，请在

IMG

中添加一个

float:left

，并在任何此类后续元素中添加与指定的

H3

相同的左边距。