CSS 将图像浮动到标题左侧

发布于 2024-12-15 05:36:24 字数 548 浏览 1 评论 0原文

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

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

我想要的是相同的视觉效果，将图像浮动到标题的左侧，但将图像标签放在后面文档中的标题如下：

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

我无法弄清楚哪些 CSS 技巧（最好是 CSS Level 2.1）可以实现这一点。有什么建议吗？

原文

If I want to float an image to the left of a heading, the way I typically do it is something this:

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

Want I want is the same visual effect, float the image to the left of the heading, but have the image tag come after the heading in the document, like this:

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

I can not figure out what CSS tricks (preferably CSS Level 2.1) will accomplish that. Any suggestions?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

猫七 2024-12-22 05:36:24

我会在 h3 上放置左边距或填充，并在 img 上放置负上边距。

回复收藏 0 原文

城歌 2024-12-22 05:36:24

您可以为标题设置页边距，然后图像将一直显示到末尾，标题将在其之后。

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

You can set margin-left for your header then your image will go till the end and header will be after it.

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

回复收藏 0 原文

梦旅人picnic 2024-12-22 05:36:24

如果您知道图像的确切尺寸，这将起作用：

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

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

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

If you know the exact dimensions of the image, this will work:

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

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

To clarify: This just uses the default document flow and repositions the image relatively. This will only work when you know the sizes exactly, though. In your css you would have to take padding and margin into account.

回复收藏 0 原文

~没有更多了~