保证金首要问题

发布于 2024-12-20 13:59:43 字数 493 浏览 0 评论 0原文

<img src="/test.png" style="margin-top:20px;margin-left:20px" title="Hello" border="1" height="100" width="110" />
<span style="text-shadow: 1px 1px 17px #347235;margin-left:20px;margin-top:-20px">Test span</span>

发生的情况是，图像已显示，但“测试跨度”消息根据 margin-left:20px 打印在图像的右侧，但 margin-top 没有执行任何操作，因为标签显示在底部的图像。我希望它显示在顶部，就像图像出现一样，但标签显示在底部。

您可以在这里看到它： http://jsfiddle.net/AMWjH/

请帮忙

原文

<img src="/test.png" style="margin-top:20px;margin-left:20px" title="Hello" border="1" height="100" width="110" />
<span style="text-shadow: 1px 1px 17px #347235;margin-left:20px;margin-top:-20px">Test span</span>

What happens is that the image is displayed but the "Test span" message is printed on the right side of the image according to the margin-left:20px but the the margin-top doesn't do anything as the label shows towards the bottom of the image. I want it to show on the top like the image comes up but the label is showing at the bottom.

You can see it right here: http://jsfiddle.net/AMWjH/

Please help

分享到QQ

分享到微博

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

发布评论

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

帅气称霸 2024-12-27 13:59:43

您可以更改垂直对齐属性来更改元素的显示方式。我认为对图像应用 vertical-align: top 可以解决您的问题：

Preview: http://jsfiddle.net/Wexcode/AMWjH/23/

另外，margin-top 和 margin-bottom 不影响你的 span 元素的原因是因为 span 是一个内联元素。您可以将其更改为 inline-block 或 block 来应用此边距（将其更改为 block 将覆盖垂直对齐）。

回复收藏 0 原文

与之呼应 2024-12-27 13:59:43

我不确定您要什么，但听起来您希望标题位于图像的右侧，但与顶部对齐。我理解这个问题吗？试试这个：

HTML：

<div class="titledImage">
    <img src="/test.png" title="Hello" width="110" height="100" />
    <p>The Title</p>
</div>

CSS：

.titledImage img {
    float: left;
}

I'm not certain what you're asking for, but it sounds like you want the title to go to the right of the image, but aligned to the top. Am I understanding the question? Try this:

HTML:

<div class="titledImage">
    <img src="/test.png" title="Hello" width="110" height="100" />
    <p>The Title</p>
</div>

CSS:

.titledImage img {
    float: left;
}

回复收藏 0 原文

冷了相思 2024-12-27 13:59:43

根据我收集的信息，您希望将文本环绕在图像周围。您只需向标记添加 align 属性即可：

<div style="padding: 20px;">
<img src="/test.png" style="margin-left:20px; margin-right: 20px;" title="Hello" border="1" height="100" width="110" align="left" />
<span style="text-shadow: 1px 1px 17px #347235;">Test span</span>
</div>

From what I gather, you want to wrap the text around the image. You just need to add an align attribute to you <img> tag:

<div style="padding: 20px;">
<img src="/test.png" style="margin-left:20px; margin-right: 20px;" title="Hello" border="1" height="100" width="110" align="left" />
<span style="text-shadow: 1px 1px 17px #347235;">Test span</span>
</div>

回复收藏 0 原文

愁以何悠 2024-12-27 13:59:43

为什么要以这种特殊方式构建代码？在完全了解您的局限性的情况下，我强烈建议您执行以下操作：（当然，取出内联样式并将它们放入样式表中）。

<div style="height: 140px; width: 150px;">  
    <p style="text-shadow: 1px 1px 17px #347235; text-align: center;">Test span</p>  
    <img src="http://ressim.net/upload/dce92a76.png" style="padding:0 20px 20px;" title="Hello" border="1" />
</div>

如果这能为您解决问题，请告诉我。没有理由使用边距和边距。负利润。不过，在这种特殊情况下，边距或填充将在图像上起作用。通常，尽可能避免负边距，并且仅在绝对必要时才使用它们。

我希望这有帮助。

Why are you structuring your code this particular way? Without fully knowing your limitations I'd strongly recommend doing something like this: (of course, take the inline styles out and put them in a stylesheet).

<div style="height: 140px; width: 150px;">  
    <p style="text-shadow: 1px 1px 17px #347235; text-align: center;">Test span</p>  
    <img src="http://ressim.net/upload/dce92a76.png" style="padding:0 20px 20px;" title="Hello" border="1" />
</div>

Let me know if this solves it for you. There is no reason to use margins & negative margins. In this particular case margin or padding would work on the image, though. As a rule, avoid negative margins if possible and only use them when absolutely necessary.

I hope this helps.

回复收藏 0 原文

~没有更多了~