如何正确地将图像浮动到段落旁边？

Question

我的网站中有一个部分，其中有一列图标，旁边有一个段落。我一直在互联网上寻找一个简单的解决方案，但一切似乎都不起作用或弄乱了我的网页。这是我尝试的最后一件事：

#exw
{
	width: 80px;
	height: 80px;
	float: left;
}

#exx
{
	width: 80px;
	height: 80px;
	float: left;
}

#exy
{
	width: 80px;
	height: 80px;
	float: left;
}

#floats
{
	width: auto;
	float: right;
	margin-right: 530px;
	margin-top: 13px;

}



#floats img
{
	margin-top: 22px;
	
}

<div id="floats"> 
<p><img id="exw" src="example.jpg"/>
<p>example</p>

  <p><img id="exx" src="example.jpg"/>
<p>example</p>
  
  <p><img id="exy" src="example.jpg"/>
<p>example</p>
  
</div>

我确信我的问题有一个非常简单的解决方案，但我想不通。有人知道我做错了什么吗？谢谢！

PS-我也确信有一种更简单的方法来编写我使用的代码（例如“类”而不是图标的单独 id）。我正在努力……

Answer 1

你的HTML代码是错误的，你没有关闭<p>标签，并且像这样修改一些css：

#exw
{
	width: 80px;
	height: 80px;
	float: left;
}
#floats > p {float:left;margin:0;}
#floats > p + p{margin-top:10px;}
#floats > p:nth-of-type(2n+1) {
clear: both;
}

#exx
{
	width: 80px;
	height: 80px;
	float: left;
}

#exy
{
	width: 80px;
	height: 80px;
	float: left;
}

#floats
{
	width: auto;
//	float: right;
//	margin-right: 530px;
	margin-top: 13px;

}



   

<div id="floats"> 
<p><img id="exw" src="example.jpg"/></p>
<p>example</p>

  <p><img id="exx" src="example.jpg"/></p>
<p>example</p>
  
  <p><img id="exy" src="example.jpg"/></p>
<p>example</p>
  
</div>