1

我有以下 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，2012 年 7 月 12 日 15:46:07 AST”应该在图像旁边，但是我在图像下方得到它。

我在图像右侧收到 Welcome abc 和 logout 按钮。

有人可以指出我做错了什么吗？

编辑 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

4

4 回答 4

1

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

然后，您应该将图像和跨度浮动到左侧。

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

你可能想要给图像一些“margin-right”。

希望有帮助。

于 2012-07-12T13:23:22.623 回答
0

您需要“浮动”您的图像和跨度：

img, span {
    float: left;
}
于 2012-07-12T12:36:13.633 回答
0

我得到了解决方案。代码应该是

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

jsfiddle

于 2012-07-12T20:18:34.637 回答
0

也许您跨度中的文本太长了。在这种情况下，您可以将跨度宽度定义为 70%，如果它当然没有边框。

于 2012-07-12T12:44:19.867 回答