助けてください。写真とテキストは 1 行で表示する必要があります_html/css_WEB-ITnose

HTMLテキストの配置

以下のスタイルを実現したい場合、左側が画像、右側がテキストになります。

作成したテキストの 2 行目が 1 行目よりも前にはみ出しており、テキストが揃っていません。テキストの配置を実現する方法がわかりません。

ディスカッションに返信（解決策）

画像の背景を設定し、append-left=front width

どのように実装し、画像ブロックを設定し、float を使用しましたか?

ul のように、background-image+padding-left を使用することもできます。

css コード:

img.pic{                float:left;                margin-right:10px;                margin-bottom:5px;                vertical-align:top;            }            p.context{                                margin:0px;                font-size:16px;                font-weight:bold;                display:inline;            }

html コード:

<img src="img/warning.png" id="pic"/>                    <p class="context">第2截面第3测点裂缝计采集值1.06mm高于警戒值1mm</p>

専門家が変更方法を教えてくれます。

左側に div を表示し、右側に div をインラインブロックします。 同様に、左側の div に画像を配置し、右側の div にテキストを配置します。

または table を使用します。直接的には、方法は上記と同様です

写真の背景を設定します、append-left = フロント幅
append-leftとは何ですか？

display:inline-block の左側の div と右側の div 同様に、左側の div に画像を配置し、右側の div にテキストを配置します。

または、table を直接使用します。方法は上記と同様です
テーブルを使用したくない場合は、最初の方法が機能しません。ありがとう。

写真の背景を設定します、append-left= フロント幅
append-left とは何ですか?
padding-left の書き方が間違っています

これに変更してみてください

">

りー

display:inline-block の左側の div と右側の div 同様に、左側の div に画像を配置し、右側の div にテキストを配置します。

または、table を直接使用します。方法は上記と似ています
テーブルを使用したくないです。あなたが言及した最初の方法は機能しません。より具体的に教えてください。ありがとう。
div をインライン要素としてレンダリングするには、display:inline-block スタイルを使用します。サイズが適切である限り、折り返されません。
または、float:left を使用して div を作成します。 float であり、サイズが適切である限り、押し出されることはありません。 ;/div>

テキスト

わかりましたか?



画像の背景を設定します、append-left= フロント幅
append-left とは何ですか?

padding-left の書き方が間違っています

これに変更してみてください

">

りー

おっしゃるとおり本当に解決しました、ありがとうございました。



display:inline-block の左側の div と右側の div

または、左側の div に画像を配置し、右側の div にテキストを配置します。 table を直接使用する場合、方法は上記と同様です

table を使用したくない場合は、ボタンを押してください あなたが言及した最初の方法は機能しません、より具体的にできますか?ありがとう。
div をインライン要素としてレンダリングするには、display:inline-block スタイルを使用します。サイズが適切である限り、折り返されません。
または、float:left を使用して div を作成します。 float であり、サイズが適切である限り、押し出されることはありません。 ;/div>

テキスト

わかりましたか?
他の方法で問題を解決しましたが、とにかくありがとう。

問題は解決しました、