2

テキストを表示してから、テキストを含む画像を表示するための最良の方法は何ですか？可能であればテーブルを使いたくないのですが、アイテムが自分の行に割り込むという問題が発生しています。

以下はこれまでの私のコードとcssです：

<div id="header_number">
    <h2 class="phone_title">Call Us Today!</h2>
    <img src="images/phone_icon.jpg" alt="Call us Today"/>
    <h2 class="large_num">1-800-555-9999</h2>
</div>

CSS：

h2.phone_title{font: 13px arial;Color:#013173;text-align:left;}
h2.large_num{font:29px arial;Color:#013173;text-align:left;}
#header_number{float:right;height:60px;width:332px;display:inline;}

コンテナのdiv（header_number）ですべてが揃うと思いましたdisplay:inline;が、うまくいきませんでした。必要に応じて、にクラスを追加し、imgそれが私の唯一のオプションである場合は、残っているすべてのものをフロートさせることができます。

4

1 に答える 1

4

次に、いくつかの要素を定義するか、 display:inline-block; vertical-align:top

このように 

h2.phone_title, h2.large_num, img
{display:inline-block;vertical-align:top;
margin:0;
}

ライブデモをチェックしてください

于 2012-11-14T04:42:35.170 に答える