将文本和图像放在不同的行中

Question

我有像

这样的代码

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

此代码创建两个选项卡，但唯一的问题是tab1 / tab2和image xxx / yyy在同一行。我希望它们在不同的行中，我希望两个span元素在同一行。 选项卡应如下所示

Answer 1

Float：css的left属性对你的工作有益

Answer 2

您可能使用了错误的元素。 <span>用于内联内容，而<div>可能更适合您尝试的内容。您希望它们在新行上，但是专门创建/用于非行中断项目。

试试这个：

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

有关What is the difference between HTML tags <div> and <span>?

的更多信息

Answer 3

我认为标记是理所当然的：

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