css - テキストと画像を別の行に配置する

Question

私は次のようなコードを持っています

<span ><img src="xxx.png">Tab1</span><span ><img src="yyy.png">Tab2</span>

このコードは2つのタブを作成しますが、唯一の問題は、tab1/tab2とimagexxx/ yyyが同じ行にあることです。これらを別の行に配置し、両方のスパン要素を同じ行に配置する必要があります。タブは次のようになります

Answer 1

Float：cssのleftプロパティは、作業を行う上で有益です。

Answer 2

間違った要素を使用している可能性があります。<span>はインラインコンテンツに使用され<div>ますが、実行しようとしていることに適している場合があります。それらを改行したいのですが、スパンは特に改行以外のアイテムのために作成/使用されます。

これを試して：

<div><img src="xxx.png">Tab1</div><div><img src="yyy.png">Tab2</div>

HTMLタグ<div>と<span>の違いは何ですか？

Answer 3

私はマークアップを当然のことと考えています：

img { display: block; }
span { float: left; }