html - 在顶部图像旁边设置文本

Question

我有以下 HTML(由 JSF 生成)

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

我原以为“Thu, 12-Jul-2012 15:46:07 AST”应该在图片旁边，但我发现它在图片下方。

我在图像右侧看到欢迎 abc 和注销按钮。

谁能指出我做错了什么？

---

编辑1

1. 我用过<div align="center">只是为了把一切都放在中心。

2. 如果我删除 <br />标签，我得到输出为 Welcome abc, logout.Thu, 12-Jul-2012 15:46:07 AST .如果我添加 <br />标记我期待输出为

   Welcome abc, logout.

   Thu, 12-Jul-2012 15:46:07 AST

   但是因为<br />标记我在图像下方得到输出。

希望这个解释对您有所帮助。

我被这个弄疯了:(

---

编辑2

jsfiddle

Answer 1

首先，第一个 div 需要足够宽以容纳您的图像和文本跨度，并将其设置为 overflow:auto 以允许在其中 float 元素。

然后您应该将图像和 span float 到左侧。

跨度应设置为“display:inline-block”。

您可能想要给图像一些“右边距”。

希望对您有所帮助。