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

4

4 に答える 4

1

まず、最初のdivは、画像とスパンをそのテキストに対応させるのに十分な幅である必要があります。また、その中にフローティング要素を許可するには、overflow：autoに設定する必要があります。

次に、画像とスパンを左側にフロートさせる必要があります。

スパンは「display：inline-block」に設定する必要があります。

おそらく、画像に「マージンライト」を与えることをお勧めします。

お役に立てば幸いです。

于 2012-07-12T13:23:22.623 に答える
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

画像とスパンを「フロート」する必要があります。

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

スパンのテキストが長すぎる可能性があります。この場合、もちろん境界線がない場合は、スパン幅を70％に定義できます。

于 2012-07-12T12:44:19.867 に答える