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>

我期待“星期四，2012年7月12日15:46:07 AST”应该在Image旁边，但是我将它放在图像下方。

我正在获取图片右侧的Welcome abc和logout按钮。

有人能指出我做错了吗？

编辑1

我曾使用<div align="center">将所有内容放在中心位置。
如果我删除了<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需要足够宽以容纳你的图像和你的文本范围，并将其设置为溢出：auto以允许其中的浮动元素。

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

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

你可能想给图像一些“边缘权利”。

希望有所帮助。

Answer 2

你需要“浮动”你的图像和范围：

img, span {
    float: left;
}

Answer 3

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

Answer 4

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

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

在顶部设置图像旁边的文本

编辑1

编辑2

jsfiddle

4 个答案:

jsfiddle