イメージはh3タグでスライドダウン

Question

私はイメージとh3タグを一緒に持っています。私はそれらを並べて必要とします。

<img src="..." alt="..." /><h3>Shopping Cart</h3> 

しかし、画像が滑っています。どうすれば解決できますか？

Answer 1

float:left;は、H3のための十分なスペースが、その後がない場合、それは意志よりよいH3タグのIMG とfloat:right用2要素 float:left両方

Answer 2

フロートを試す可能性があります またはdisplay:inline;両方に

をそれを使用します下がる。代わりに、フロートの 使用display:inline-blockは良い仕事します両方のための

<img src="..." style="float:left" alt="..." /><h3 style="float:right">Shopping Cart</h3> 

Answer 3

display: inlineを試してみてください。もう1つは、固定幅（つまり：width: ___px）または最小幅（つまり：min-width: ___px）のいずれかでdivに囲む必要があります。そのため、常に横に並んで座るための十分な水平スペースが確保されます。お互いの横に座らせるためにどのようなソリューションを使用しても、十分な幅がなく、幅を保持していない場合は、縦方向に倒れて積み重なります。画像をタイトルに関連している場合

Answer 4

、その後、IMGタグは、H3の内側に行く必要があります：あなたはあなたがに画像の垂直方向の配置を相対的に調整することができ、という

<h3><img ... /> Shopping Cart</h3>

を完了したら以下のようなものを使用して、見出しのベースラインは：

h3 img {top:5px}

もう一つのアイデアは完全IMGを削除し、H3にパディングを追加し、背景画像としてアイコンを示し、特殊なクラス名を与えることです。これは、HTMLテンプレートよりもスタイルシートを変更する方が簡単で、コードが短く、ページにアクセスしやすいため、良いことです。

h3.shoppingcart {padding-left: 20px; background:url("cart.gif") center left no-repeat;}