blocks|key|1565927|text|您需要“浮动”您的形象和跨度：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1565928|img,+span+{
++++float:+left;
}|code-block|syntax|javascript|1565929|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You need to "float" your image and span:</p>

<pre><code>img, span {
    float: left;
}
</code></pre>


blocks|key|1087019|text|也许你的文字跨度太长了。在这种情况下，您可以定义您的跨度宽度为70%25，当然，如果它没有边框。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1087020|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Maybe the text in your span is too long.
in this case you might define your span width to 70%, if it haven't border of course.</p>


blocks|key|773775|text|首先，第一个div需要足够宽，以容纳您的图像和您的跨度与它的文本，并将它设置为溢出:auto允许浮动元素在其中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|773776|然后，您应该浮动图像和跨度向左。|773777|跨度应设置为“显示:内联块”。|773778|你可能会想给图像一些“空白-右”。|773779|希望这能有所帮助。|773780|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|N|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|O|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|K|$]]

<p>First of all the first div will need to be wide enough to accomodate your image and your span with its text and also set it to overflow:auto to allow floating elemts within it.</p>

<p>You should then float the image and the span to the left.</p>

<p>The span should be set to "display:inline-block".</p>

<p>You'll probably want to give the image some "margin-right".</p>

<p>Hope that helps.</p>


blocks|key|1087057|text|我找到解决办法了。代码应该是|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1087058|<div+align="center">
++++<img+src="http://blog.kevinchisholm.com/wp-content/uploads/2011/11/jquery2.png"+style="vertical-align:+top"/>
++++<span+style="display:inline-block"+align="right">
++++++++Welcome+abc,+logout.
++++++++<br+/>
++++Thu,+12-Jul-2012+15:46:07+AST
++++</span>
</div>|code-block|syntax|javascript|1087059|小提琴|offset|length|1087060|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/a2YJc/2/^0|0|0|0|3|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>I got the solution. Code should be </p>

<pre><code>&lt;div align="center"&gt;
    &lt;img src="http://blog.kevinchisholm.com/wp-content/uploads/2011/11/jquery2.png" style="vertical-align: top"/&gt;
    &lt;span style="display:inline-block" align="right"&gt;
        Welcome abc, logout.
        &lt;br /&gt;
    Thu, 12-Jul-2012 15:46:07 AST
    &lt;/span&gt;
&lt;/div&gt;
</code></pre>

<h2><a href="http://jsfiddle.net/a2YJc/2/" rel="nofollow">jsfiddle</a></h2>


<p>I have the following HTML (generated by JSF)</p>

<pre><code>    &lt;div align="center"&gt;
        &lt;img src="images/background_image.jpg" height="200px" width="30%" style="vertical-align: top"/&gt;
        &lt;span style=""&gt;
            Welcome abc, &lt;input type="submit" value="logout" /&gt;.
            &lt;br /&gt;
            Thu, 12-Jul-2012 15:46:07 AST
        &lt;/span&gt;
    &lt;/div&gt;
</code></pre>

<p>I was expecting "Thu, 12-Jul-2012 15:46:07 AST" should be next to Image, however I am getting it below image.</p>

<p>I am getting Welcome abc and logout button at the right side of the image.</p>

<p>Can someone point what I am doing wrong?</p>

<hr>

<h2>Edit 1</h2>

<ol>
<li>I have used <code>&lt;div align="center"&gt;</code> just to put everything at the center.</li>
<li><p>If I remove <code>&lt;br /&gt;</code> tag, I get output as <code>Welcome abc, logout.Thu, 12-Jul-2012 15:46:07 AST</code>. If I add <code>&lt;br /&gt;</code> tag I was expecting output as </p>

<p><code>Welcome abc, logout.</code></p>

<p><code>Thu, 12-Jul-2012 15:46:07 AST</code></p>

<p>However because of <code>&lt;br /&gt;</code> tag I am getting output below image.</p></li>
</ol>

<p>Hope this explanation helps.</p>

<p>I am going mad with this :(</p>

<hr>

<h2>Edit 2</h2>

<h2><a href="http://jsfiddle.net/a2YJc/1/" rel="nofollow">jsfiddle</a></h2>


setting text next to Image at top

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有以下HTML (由JSF生成)    <div align="center">        <img src="images/background_image.jpg" height="200px" width="30%" style="vertical-align: top"/>        <span st...

问设置顶部图像旁边的文本
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问设置顶部图像旁边的文本EN